Clever Geek Handbook

LESS mixin - Output values ​​without quotes

I am trying to write a LESS mixin with multiple props for CSS transforms. Input values ​​are the type of conversion to perform and the value associated with the conversion.

For example, consider the code below:

.transform(@type; @value){
}

If I specify the input as type='rotateY'

and value='360deg'

, the output should be transform: rotateY(360deg)

. I tried the options below, but none of them seem to work (the output is mentioned as a comment).

transform: "@{type}(@{value})"; /* Output: "rotateY(360deg)" */
transform: @{type}(@{value}); /* Output: Compiler error */
transform: @type(@value); /* Output: rotateY 360deg */

How should I code it to get the result as needed? Please, help.

Note. There are many other elements in the mixin code as well, I only posted the line that needs fixing.

+1


source to share


1 answer


Just remove the line using ~

as shown below. This will make sure the quotes are not printed in the output CSS.

Input code:

transform: ~"@{type}(@{value})";

or

transform: e("@{type}(@{value})");


Call mixing:

.transform(rotateY;360deg);

CSS output:

transform: rotateY(360deg);
+11


source






More articles:


All Articles