Less less language language: evitare che le parentesi vengano omesse nel CSS compilato

Question

Sto utilizzando {less} e ho riscontrato un problema nell'utilizzo delle parentesi. Ho scritto un mixin per una proprietà di trasformazione CSS3. Non riesco a capire come avere una parentesi nel CSS compilato. Meno vede le parentesi come un'operazione e le omette.

originale CSS:

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

Meno mixin ho scritto:

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

E il CSS compilato che risultati:

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

Answer 1

Si può semplicemente tenerlo come un valore e passare tutto ciò che è necessario quando lo si chiama.

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

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

compila per

.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

Cambia la tua mixin a qualcosa di simile (la chiave lo sta costruendo in una stringa e quindi utilizzando un valore di escape):

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