Daha az stil sayfası dili: parantezlerin derlenmesini önleme derlenmiş CSS

Question

{less} kullanıyorum ve parantez kullanımıyla ilgili bir sorun yaşadım. CSS3 dönüşüm özelliği için bir mixin yazdım. Derlenmiş CSS'de nasıl parantez olduğunu anlayamıyorum. Daha az parantezleri bir işlem olarak görür ve bunları ihmal eder.

Orjinal CSS:

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

Az mixin yazdım:

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

Ve sonuçları derlenmiş CSS:

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

Answer 1

Sadece bir değer olarak saklayabilir ve aradığınızda ihtiyacınız olan her şeyi iletebilirsiniz.

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

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

bu işleri

.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

tuşu (böyle bir şey için mixin değiştirin

onu bir dizeye ve sonra bir çıkış değeri kullanarak):

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