lesscssのミックスインで

Question

標準lesscssのミックスインを任意の個数の値を連結

#myBox { 
    box-shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa; 
    -moz-box-shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa; 
} 

To ie。インセットとグロー効果を作成します。もちろん、私はこの場合にも、ベンダープレフィックス呪いを改善するためにlesscssを使用したいのですが、

.box-shadow() { 
    -moz-box-shadow: @arguments; 
    box-shadow: @arguments; 
} 

#myBox { 
    .box-shadow(inset 0px 1px 0px white, 0px 0px 5px #aaa); 
} 

は

#myBox { 
    box-shadow: inset 0px 1px 0px white 0px 0px 5px #aaa; 
    -moz-box-shadow: inset 0px 1px 0px white 0px 0px 5px #aaa; 
} 

をレンダリング（white後に行方不明カンマに気づく）されます！構文的には間違っています。 ,の代わりで複数の引数を連結にlesscssトリックする方法はありますか？私はあなたがリテラル文字列として引数の文字列をエスケープする場合、それはちょうどあなたが好きなの上にコンマを運ぶでしょう

Answer 1

はエスケープされた文字列を使用し

#myBox { .box-shadow(~"inset 0px 1px 0px white, 0px 0px 5px #aaa"); } 

またはJavaScriptエスケープ以下

1.2.0未満と：

.box-shadow() { 
    @shadow: ~`'@{arguments}'.replace(/[\[\]]/g, '')`; 
    -webkit-box-shadow: @shadow; 
     -moz-box-shadow: @shadow; 
      box-shadow: @shadow; 
} 
#myBox { .box-shadow(inset 0px 1px 0px white, 0px 0px 5px #aaa); } 

1.3.0以下であり、（必要とし...可変長指定子を使用しています）上記：

.box-shadow(...) { 
    @shadow: ~`'@{arguments}'.replace(/[\[\]]/g, '')`; 
    -webkit-box-shadow: @shadow; 
     -moz-box-shadow: @shadow; 
      box-shadow: @shadow; 
} 

著者の推奨される方法は、中間変数です：

#myBox { 
    @shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa; 
    .box-shadow(@shadow); 
} 

ソリューションを使用して

Answer 2

...これは、多かれ少なかれ標準問題であるべきと思ったが、任意の標準的な解決策を発見していません：

.box-shadow() { 
    -moz-box-shadow: @arguments; 
    box-shadow: @arguments; 
} 

#myBox { 
    .box-shadow(~"inset 0px 1px 0px white, 0px 0px 5px #aaa"); 
} 

出力：

#myBox { 
    -moz-box-shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa; 
    box-shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa; 
} 

Answer 3

は と複数引数を持つhere作品が見つかりました：

.box-shadow (@value1,@value2:X,...) 
{ 
    @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; 

    -webkit-box-shadow: @value; 
    -moz-box-shadow: @value; 
    -ms-box-shadow: @value; 
    -o-box-shadow: @value; 
    box-shadow: @value; 
} 

Answer 4

あなたが（代わりにhttp://lesscss.orgからjavascriptのlesscssコンパイラの）サーバー側のコンパイルにlessphp（http://leafo.net/lessphp/）を使用している場合PHP関数をバインドして、連結に使用される文字を変更することができます。

例lesscssコード：

.linear-gradient(@fallback, @deg, @tail...) { 
    background-color: @fallback; 
    background-image: linear-gradient(@deg, separateByComma(@tail)); 
    background-image: -webkit-linear-gradient(@deg, separateByComma(@tail)); 
    background-image: -moz-linear-gradient(@deg, separateByComma(@tail)); 
    background-image: -o-linear-gradient(@deg, separateByComma(@tail)); 
} 

body { 
    .linear-gradient(#FCFCDD, 135deg, #FCFCDD, #FFFFFF 66%, #FCFCDD); 
} 

バウンドPHP関数：

function lesscss_separateByComma($arg) { 
    if($arg[0]=='list') 
      $arg[1]=','; 
     return $arg; 
} 

と結合を行うと、lesscssコードをコンパイルする：

$less=new lessc(); 
$less->registerFunction('separateByComma', 'lesscss_separateByComma'); 
$code=$less->compile($code); 

出力：lessphp 0.4.0でテスト

body { 
    background-color: yellow; 
    background-image: linear-gradient(135deg,#FCFCDD,#FFFFFF 66%,#FCFCDD); 
    background-image: -webkit-linear-gradient(135deg,#FCFCDD,#FFFFFF 66%,#FCFCDD); 
} 

。