スタイルシート言語が少ない：コンパイル済みのCSSでカッコが省略されないようにする

Question

{less}を使用していて、括弧を使用して問題が発生しました。私はCSS3変換プロパティ用のミックスインを書きました。私はコンパイルされたCSSにかっこを入れる方法を理解できません。 lessは操作としてかっこを見て、省略します。

オリジナルCSS：

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

少ないミックスインは、私が書いた：

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

、結果コンパイルCSS：

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

Answer 1

あなたはそれを1つの値として保持し、それを呼び出すときに必要なものを渡すことができます。

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

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

.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

は、キー（このような何かにあなたのミックスインを変更

それを文字列にしてエスケープされた値を使用しています）：

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