LESS CSSの内部でJavascript forループを実行できますか？

Question

Lessの中でforループを実行したいと思っています。 Lessの中でこれを行うことは可能ですか？私はそれがjsを評価する能力を持っていることを知っていますが、この程度ですか？

Answer 1

チェックアウトにはTwitter Bootsrapをお勧めします。彼らはそのようにグリッドシステムを構築しています。彼らは必要なすべてのクラスを入力するのではなく、少ないミックスインで再帰でループします。

興味深い部分はmixins.lessファイルで、lessディレクトリの "// The Grid"コメント（516行目）の下にあります。興味深い部分は、次のとおりです。（特に）を生成

#grid > .core(@gridColumnWidth, @gridGutterWidth); 

：

.span12 { 
    width: 940px; 
} 
.span11 { 
    width: 860px; 
} 
.span10 { 
    width: 780px; 
} 
... 

bootstrap.cssをこの方法以下のディレクトリにgrid.lessファイルで呼び出され

#grid { 

    .core (@gridColumnWidth, @gridGutterWidth) { 

     .spanX (@index) when (@index > 0) { 
     (~".span@{index}") { .span(@index); } 
     .spanX(@index - 1); 
     } 
     .spanX (0) {} 

     ... 

     .span (@columns) { 
     width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); 
     } 
... 

@gridColumnWidth、@gridGutterWidthおよびその他の変数のチェックvar iables.lessファイル（184行目）

最後のバージョンのlesscノードコンパイラがインストールされていることを確認してください。

Answer 2

the docsのループについては何もありませんが、あなたは、バッククォートを経由してJavaScriptの表現にアクセスすることができるので、あなたは常にあなたのスクリプト（ない自分のLESSコード内の関数を定義するが、JavaScriptでき  —は例えば、IFは、ブラウザでは、あなたがしたいです例えば、あなたのループを実行し、別script要素）を持っているし、それをアクセス：

@height: `doMyLoop()` 

それはあなたがループで達成しようとしているものに依存します。ループにCSSルールを出力させたい場合は、運が悪いと思われます。

Answer 3

これはハックですが... これをファイルに追加してください。

@testColor: green; 

unusedclass { 
    unknownprop: ~`loopCss(10,".group{{i}} { background-color: @{testColor}; }")` 
} 

次の関数でのJavaScriptファイルloopCss.jsを作成します。

function loopCss(count,cssTemplate) { 
    // end the existing unused class 
    var result = "0;}\n"; 
    // Add your custom css 
    for(var i=0; i<count; i++) result += cssTemplate.replace("{{i}}",i) +"\n"; 
    // Handle the close bracket from unused class 
    result += "unusedclass {"; 
    return result; 
} 

は、今すぐあなたのless.js前loopCss.jsが含まれており、それが動作するはずです。