Concatenate strings in Less
Use Variable Interpolation:
@url: "@{root}@{file}";
Full code:
@root: "../img/";
@file: "test.css";
@url: "@{root}@{file}";
.px{ background-image: url(@url); }
As you can see in the documentation, you can use string interpolation also with variable and plain strings together:
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
I was looking for the same trick for handling images. I used a mixin to answer this:
.bg-img(@img-name,@color:"black"){
@base-path:~"./images/@{color}/";
background-image: url("@{base-path}@{img-name}");
}
Then you can use :
.px{
.bg-img("dot.png");
}
or
.px{
.bg-img("dot.png","red");
}
For those string-like unit values like 45deg
in transform: rotate(45deg)
use the unit(value, suffix)
function.
Example:
// Mixin
.rotate(@deg) {
@rotation: unit(@deg, deg);
-ms-transform: rotate(@rotation);
transform: rotate(@rotation);
}
// Usage
.rotate(45);
// Output
-ms-transform: rotate(45deg);
transform: rotate(45deg);
Don't know if you're using less.js or lessphp (like in WP-Less plugin for WordPress) but with lessphp you can "unquote" strings with ~
: http://leafo.net/lessphp/docs/#string_unquoting