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.


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})";



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


Call mixing:



CSS output:

transform: rotateY(360deg);




All Articles