44

に詳しくありませんLess。私の理解では、フォーマットファイルを標準ファイルにLess変換できると思います（間違っている場合は修正してください）。今、私は以下の質問があります。lesscss

以下のような 100 個の CSS クラス ( .span1～.span100) を 1 つの CSS ファイルで生成するとします。lessそのようなCSSファイルを生成できるかどうか知りたいですか?

...
.span5 {
  width: 5%;
}

.span4 {
  width: 4%;
}

.span3 {
  width: 3%;
}

.span2 {
  width: 2%;
}

.span1 {
  width: 1%;
}
4

4 に答える 4

59

これを試して：

@iterations: 5;
.span-loop (@i) when (@i > 0) {
    .span-@{i} {
        width: ~"@{i}%";
    }
    .span-loop(@i - 1);
}
.span-loop (@iterations);

出力：

.span-5 {
  width: 5%;
}
.span-4 {
  width: 4%;
}
.span-3 {
  width: 3%;
}
.span-2 {
  width: 2%;
}
.span-1 {
  width: 1%;
}

less2cssで試すことができます。

2014 年 4 月 3 日編集

より多くのオプションを備えたより柔軟なバージョンを次に示します。

.custom-loop( @base-value:@n ; @n ; @unit : px; @j : 1 ;@_s:0 ; @step-size:1  ; @selector:~".span-"; @property : width)
when not(@n=0)  {

  @size : @base-value+@_s;
  @{selector}@{j}{
    @{property} : ~"@{size}@{unit}";
  }
  .custom-loop(@base-value ,  (@n - 1), @unit , (@j + 1) ,  (@_s+@step-size) , @step-size,  @selector, @property);
}

@nこれは、必要な引数のみで呼び出すことができます。

.custom-loop(@n:3);

どちらが出力されますか:

.span-1 {
  width: 3px;
}
.span-2 {
  width: 4px;
}
.span-3 {
  width: 5px;
}

ただし、各パラメータを制御したい場合は、すべてのカスタム パラメータを使用した例を次に示します。

.custom-loop( @n: 3 , @base-value:1, @unit: '%', @property:font-size, @selector: ~".fs-", @step-size: 2);

これは出力されます：

.fs-1 {
  font-size: 1%;
}
.fs-2 {
  font-size: 3%;
}
.fs-3 {
  font-size: 5%;
}

パラメータの説明

  1. @n :整数、反復回数。

  2. @base-value (オプション): integer、プロパティに割り当てられるループの開始値。デフォルト値は、反復回数に割り当てられた値と同じです@n。

  3. @unit (オプション):文字列、プロパティの単位。デフォルト値はpxです。

  4. @property (オプション):非文字列または文字列CSS プロパティ。デフォルト値はwidth

  5. @selector (オプション):エスケープされた文字列、ループに使用されるセレクター。エスケープされた文字列として渡される限り、何でもかまいません。

  6. @step-size (オプション): integer , ループがインクリメントする値。

ノート

注 1:カスタム セレクターは、エスケープされた文字列として渡されます。エスケープしないと、期待どおりに動作しません。

注 2: mixin は、パラメーター名を明示的に使用して呼び出されます。これには、いくつかの利点と欠点があります。

注 3:単位は文字列として渡されます。

利点

  1. どのパラメータが呼び出されているかは明らかです
  2. パラメータの順序に依存する必要はなく、どのパラメータが 1 番目、2 番目、… に来るかを覚えておく必要はありません</li>

短所

  1. 私はそれが少し醜く見えると思いますか？
  2. （リストに追加するか、より良い実装を知っている場合は実装を変更してください）
于 2014-01-18T01:54:11.143 に答える
23

すべて、CSSをループで出力する方法を見つけました。レビューしてください。ありがとうございます。

@iterations: 100;

// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (@index) when (@index > 0) {

    // create the actual css selector, example will result in
    // .myclass_30, .myclass_28, .... , .myclass_1
    (~".span@{index}") {
        // your resulting css
        width: percentage((@index - 1) *0.01);
    }

    // next iteration
    .loopingClass(@index - 1);
}

// end the loop when index is 0
.loopingClass (0) {}

// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);
于 2013-03-06T08:21:02.737 に答える
1

指定されたメソッド内で行うことは不可能です。

しかし、次のように可能です：

.loopingClass (@index) when (@index > 0){
  .span_@{index}{
    width: @index px;
  }
  .loopingClass(@index - 1);
}
.loopingClass(5);

Resilt は次のようになります。

.span_100 {
  width: 100 px;
}
.span_99 {
  width: 99 px;
}
.span_98 {
  width: 98 px;
}
.span_97 {
  width: 97 px;
}
.span_96 {
  width: 96 px;
}
.span_95 {
  width: 95 px;
}

and e.t.c.
于 2014-02-19T12:51:02.013 に答える