Weniger Style-Sheet-Sprache: verhindern Klammern im kompilierten CSS weggelassen werden

Question

Ich verwende {less} und stieß auf ein Problem mit Klammern. Ich habe ein Mixin für eine CSS3 Transform Eigenschaft geschrieben. Ich kann nicht herausfinden, wie eine Klammer im kompilierten CSS zu haben ist. Less sieht die Klammern als eine Operation und lässt sie weg.

Original-CSS:

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

Weniger mixin schrieb ich:

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

Und die CSS zusammengestellt, die Ergebnisse:

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

Answer 1

Sie könnten es einfach als einen Wert behalten und alles weitergeben, was Sie brauchen, wenn Sie es anrufen.

.transform(@value) { 
    -webkit-transform: @arguments; 
    -moz-transform: @arguments; 
    transform: @arguments; 
} 

.plus { 
    .transform(rotate(45deg)); 
    .transform(scale(1.5, 2.0)); 
} 

kompiliert

.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

ändern mixin so zu etwas (der Schlüssel baut es in eine Zeichenfolge auf und verwendet dann einen Escape-Wert):

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