1

ファイルの先頭に一括でブロック名を定義したい

@block: widget-a;

そして、それをセレクターで使用します

.@{block} {
    // my styles
}

しかし、ブロックが複数あるとそれができません。変数@blockは最後の値を取り、セレクターを壊します

// file a.less
@block: widget-a;
.@{block} {
    // styles for widget-a
}

// file b.less
@block: widget-b;
.@{block} {
    // styles for widget-b
}

.widget-bファイルが異なるにもかかわらず、両方のルールセットがブロックされました。各ブロックの名前を保持する方法はありますか?

ここに要点があります: https://gist.github.com/just-boris/a86f3646f48683a9bf17ビルドして再現することができます。私が使うless 2.3.0

4

1 に答える 1

3

同じ変数名を 2 回使用する必要がある理由がわかりません。あなたのコードはコンパイルされません:

あなたのコード：

// file a.less
@block: ~".widget-a";
@{block}: {
    // styles for widget-a
}

次のようにする必要があります。

// file a.less
@block: ~".widget-a";
@{block} {
    // styles for widget-a
}

variable-interpolationを参照してください:

@block: widget-a;
.@{block} {
    // styles for widget-a
    color: red;
}

@harry で既に述べたように、同じ変数を同じスコープで 2 回定義すると、最後の宣言が優先されます。コードを mixin でラップするか、名前空間を使用できます。

// file a.less
.a() {
@block: widget-a;
.@{block} {
    // styles for widget-a
    color: red;
}
}
.a();

// file b.less
.b() {
@block: widget-b;
.@{block} {
    // styles for widget-b
    color:blue;
}
}
.b();

出力:

.widget-a {
  color: red;
}
.widget-b {
  color: blue;
}
于 2015-01-27T12:48:35.910 に答える