12

実際に複合名を割り当てることにより、LESS CSS で変数を動的に定義する mixin を作成しようとしています。

単純化されたユースケース (実際のものではありません):

.define(@var){
    @foo{var}: 0;
}

次に、ミックスインを次のように呼び出します。

.define('Bar'){
    @fooBar: 0;
}

この種の文字列補間はセレクター名を使用しているときに可能であるため、変数名でも同じことが可能かどうか疑問に思っていました。これまでのところ、試したさまざまな構文でうまくいきませんでした（上記以外に、エスケープ、引用、~接頭辞の使用などを試しました）。

編集

もう1つ試してみたところ、近いかもしれないと感じています。しかし、私は LESS 構文の奇妙な点を経験しています。これを書くと：

.define(@var){
    #namespace {
         @foo: @var;
    }
}

そして、次のように呼び出します。

.define(0)

次に@foo、通常の名前空間の方法で使用できます。

.test {
     #namespace;
     property: @foo; /* returns 0 */
}

ただし、文字列補間セレクタの場合は同じではありません。

.define(@var, @ns){
    #@{ns} {
         @foo: @var;
    }
}

.define(0, namespace);

.test {
     #namespace;
     property: @foo;
}

上記のコードでは、次のエラーが表示されます。

名前エラー: #namespace が定義されていません

ただし、文字列補間は成功し、有効でした。実際のところ、その.test部分を取り除いてテスト プロパティを出力するように上記を変更すると、CSS が正しく解析されていることがわかります。つまり：

.define(@var, @ns){
    #@{ns} {
         @foo: @var;
         prop: @foo;
    }
}

.define(0, namespace);

次の CSS を出力します。

#namespace {
    prop: 0;
}
4

4 に答える 4

12

これはできません

あなたがやりたいことは、現在LESSでは不可能です。どの変数名の使用を許可するか(つまり、完全に動的ではない)を前もって知っている場合は、2 つの「回避策」が考えられます。次に、次のいずれかのようなことができます。

アイデア #1 (可変変数)

.define(@var) {
  @fooBar: 0;
  @fooTwo: 2;
  @fooYep: 4;

  @fooSet: 'foo@{var}';
}

.define(Two);
.test {
  .define(Bar);
  prop: @@fooSet;
}
.test2 {
  prop: @@fooSet;
}

アイデア #2 (パラメトリック ミックスイン)

以下

.define(@var) {
  .foo() when (@var = Bar) {
    @fooBar: 0;
  }
 .foo() when (@var = Two) {
    @fooTwo: 2;
  }
 .foo() when (@var = Yep) {
    @fooYep: 4;
  }
  .foo();
}

.define(Two);
.test {
  .define(Bar);
  prop: @fooBar;
}
.test2 {
  prop: @fooTwo;
}

CSS 出力 (両方のアイデア用)

.test {
  prop: 0;
}
.test2 {
  prop: 2;
}

結論

しかし、どちらが実際にどれほど役立つかはわかりませんし、実際のユースケースで実際に適用できるかどうかもわかりません（上記は実際のユースケースではないことを述べているため）。LESS で完全に動的な変数が必要な場合は、LESS 自体では実行できません。

于 2013-08-04T02:43:52.650 に答える
1

受け入れられた回答をフォローアップするには、次のように .define() mixin を拡張して変数の値を定義することもできます。これにより、ルール内で変数の一時的なセットを使用できます。

.define(@var, @val) {
  .foo() when (@var = temp1) {
    @temp1: @val;
  }
 .foo() when (@var = temp2) {
    @temp2: @val;
  }
 .foo() when (@var = temp3) {
    @temp3: @val;
  }
  .foo();
}

.define(temp2, 2);
.test {
  .define(temp1, 0);
  prop: @temp1;
}
.test2 {
  prop: @temp2;
}

CSS出力

.test {
  prop: 0;
}
.test2 {
  prop: 2;
}

これは、背景サイズのレスポンシブ背景画像を生成するためにミックスインでこれを使用する方法のより複雑な要点です。(および IE8 フォールバック)。

于 2014-10-09T11:07:02.983 に答える
1

例を構築する時間はありませんが、変数を定義し、それに基づいてインポートを組み立てるほど迅速かつ単純なものは上記のいずれにもありません。次に、同じ変数が定義されている複数のドキュメントを作成します。

@whitelabel: 'foo';
@import 'whitelabel/@{whitelabel}/colors';
于 2015-09-03T16:48:59.607 に答える