Menu
The same + operator you use for adding two numbers can be used to concatenate two strings. You can also use += , where a += b is a shorthand for a = a + b .
You concatenate strings by using the + operator. For string literals and string constants, concatenation occurs at compile time; no run-time concatenation occurs. For string variables, concatenation occurs only at run time.
Concat() or + is the best way.
Summary: Using the string concatenation operator is slightly faster than using format string literals. Unless you are performing many hundreds of thousands of string concatenations and need them done very quickly, the implementation chosen is unlikely to make a difference.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With