0

Less では、クラス名の一部にアクセスして mixin 内で使用することは可能ですか?

これは、例で最もよく説明されます。

次のように宣言したグリッドがあります。

.columns (@columns) {
    //code here to generate column widths
}

//This is where my problem is:
.column-1 {
    .col (1)
}
.column-2 {
    .col (2)
}
.column-3 {
    .col (3)
}
// etc etc

明らかに、ここでは多くの反復コードが実行されています。理想的には、列1列2などを宣言する必要がなく、クラス名を解析し、ダッシュの後の値を使用して列幅を自動的に計算する何らかの方法、おそらく正規表現を使用できるようにしたいと考えています。Twitterのブートストラップが似たようなことをしていることはほぼ確実ですが、理解できません:

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

2 に答える 2

1

私はあなたがそれを理解すると思います：

.columnX (@index) when (@index > 0) {          // Guarded mixin: use this mixin when the condition is true (like an if statement)
    (~".column-@{index}") {                    // outputs .column-0 as a class name
        .col(@index);                          // for the contents, use the col mixin
    }    // which class you are doing

    .columnX(@index - 1);                      // Recursive call to the same mixin, going down by 1
}
.columnX (0) {} // Default implementation so that when .columnX(0) is called, a matching mixin is found.

.col (@index) {
    // actual css that will be applied to column-1 if @index is 1
    width: @index * 10px; // for example
}
.columnX(3);                                   // number of columns you want

編集(の を逃した) 編集;コメントを追加.columnX(3);

これにより、次の結果が得られます。

.column-3 {
    width: 30px;
}
.column-2 {
    width: 20px;
}
.column-1 {
    width: 10px;
}
于 2012-06-27T17:17:41.690 に答える
0

これは本質的に@sherbrowの答えと同じですが、もう少し簡潔でエラーはありません。これは、彼の正しい答えを裏付ける長い説明コメントだと考えてください。コメントに収まりきらないほどです。

このようなLESS ループmixin を中間ヘルパーとして使用し、生成するクラスの数を指定して呼び出します。.column-1、.column-2、およびを行う方法は次のとおり.column-3です。4 列まで移動したい場合: [9 行目].columns(4)の代わりに実行します。.columns(3)5 列まで移動するには、 を実行します.columns(5)。

1    // we'll call this if we want to build columns
2    .columns(@i) when (@i > 0) {
3      .column-@{i} {
4        .col(@i)
5      }
6      .columns(@i - 1)
7    }
8    // for example, here we build columns 1-3
9    .columns(3);

の結果にコンパイルされます

.column-1 {.col(1)}
.column-2 {.col(2)}
.column-3 {.col(3)}

(あなたの質問は既に mixin.col(@x)があると仮定しているので、私もそれを仮定しています。その余分なステップをスキップする方法については、4を参照してください。)

何が起こっているかは次のとおりです。

  1. 最初のチャンク全体 [1 ～ 7 行目] は、呼び出されるまでそのままです。
  2. .columns(3)[9 行目] は.columns(@i)mixin [2 行目] に送信し、変数@iに valueを割り当てます3。
  3. @i(3) は 0 より大きい [2 行目] ため、ガードを満たし、[ 2行目]を通過でき{ます。
  4. .column-@{i} {...}[3-5 行目] は、この mixin が出力するものです。
    • @iは 3 なので、出力は次のようになります。.column-3 {.col(3)}
    • 構文@{i}は、変数の値を文字列として挿入するために使用されます
    • 他の場所で使用する必要がない場合は.col(@x)、ここにスタイルを直接ドロップすることもできます (例: @sherbrow)。.column-@{i} {width: @i * 10px}
  5. そして、ループ: 3 行目から 5 行目をコンパイルした後、この mixin を再度呼び出しますが、値は異なります [6 行目]: .columns(@i - 1)==> .columns(3 - 1)==> .columns(2)。
  6. トップに戻る [行 2]: @i、現在 2 は 0 よりも大きいため、入力が許可されてい.column-2 {.col(2)}ます。.col(2).column-2 { the.col(2)styles }
  7. @iそして、 が 0 より大きくなくなるまで出力とループを続けます (つまり、 の後に停止し.columns(1)ます)。
于 2016-09-12T02:44:50.210 に答える