5

論理的な方法は次のとおりです。

.mymixin() {
  sample_key: samplevalue;
}

@avar:  mymixin;
.@{avar}();

しかし、解析エラーが発生します。

それを行う方法はありますか？

4

1 に答える 1

10

モジュールのミックスイン

変数からの参照によって特定の mixin を呼び出したい場合は、パラメーターを使用する必要があります。名前でパラメトリック mixin を動的に呼び出すことはできないためです。したがって、やりたいことに最も近いのは、モジュール mixin を使用することです。

LESSでは次のようになります。

.mixin(mymixin) {
  sample_key:samplevalue;
}

.mixin(anothermixin) {
  another_key:anothervalue;
}

@avar: mymixin;
.mixin(@avar);

出力CSSは期待どおりになります。

sample_key: samplevalue;

に変更@avarするanothermixin場合は、2 番目の mixin を具体的に呼び出します。

ここで @ScottS はこのアプローチをうまく利用しています: LESS CSS Pass mixin as a parameter to another mixin

編集：

答えをもう少し詳しく説明します。あなたのアプローチがうまくいかないのはなぜですか？問題は、行が次の構造を持つ必要があるセレクター/ルール補間にあります。

.prefix-satring-@{classname} some-more-string { property:value; }

{そのため、セレクター名の後に a が必要であり、エスケープ(されていないものはルール補間で有効な構文として受け入れられないため、それを使用して mixin を呼び出すことはできません。

追加情報：

同様に、LESS でプロパティ名を動的に生成することはできません。したがって、 Sass (別の非常に人気のあるプリプロセッサ言語) では.myclass{-webkit-@{property}:value;}可能である のようなことはできません。ただし、それにはいくつかの回避策があります。

ここで考えられるもう 1 つの問題は、補間されたクラス (例: ) が CSS に直接レンダリングされ、再利用.@{avar}{something:something;}できる LESS オブジェクト/ミックスインとして存在しないことです。

于 2013-05-12T10:32:15.280 に答える