Less style sheet language: exclude parentheses in compiled CSS

Question

I am using {less} and have encountered the problem of using parentheses. I wrote a mixin for the CSS3 transform property. I cannot figure out how to copy copied CSS. Less sees the brackets as an operation and omits them.

Original CSS:

.plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } 

Less mixin I wrote:

  .transform (@action, @value){ -webkit-transform: @action(@value); -moz-transform: @action(@value); -o-transform: @action(@value); } 

And compiled CSS that gives the result:

  .plus { -webkit-transform: rotate 45deg; -moz-transform: rotate 45deg; -o-transform: rotate 45deg; } 

Answer 1

You can just save it as a single value and pass everything you need when you call it.

 .transform(@value) { -webkit-transform: @arguments; -moz-transform: @arguments; transform: @arguments; } .plus { .transform(rotate(45deg)); .transform(scale(1.5, 2.0)); } 

compiles to

 .plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform: scale(1.5, 2); -moz-transform: scale(1.5, 2); transform: scale(1.5, 2); } 

Answer 2

Change your mixing to something like this (the key builds it into a string and then uses an escaped value):

 .transform (@action, @value){ @escapedValue: ~"@{action}(@{value})"; -webkit-transform: @escapedValue; -moz-transform: @escapedValue; -o-transform: @escapedValue; }