3

これは、既存の一般的なcssルール（元のファイル）です。

.caption-top {
  color: red;
}

これは概略的なものです。実際のケースでは.caption-top、コンテキストに応じて、セレクターを別のものにする必要があるためです。ただし、セレクターのすべてのオカレンスを変更するのではなく、変数を使用したいと思います。たとえば、あるコンテキストでは、になり.field-name-field-caption-topます。だから私はこれをしました（ラッパーファイル）：

@caption-top:  .field-name-field-caption-top;
@caption-top {
  color: red;
}

これにより、LESS解析エラーが生成されます。セレクターを置き換えるルールを確立する別の方法はありますか？したがって、上記の例では、ルールは最終的に次のようになります。

.field-name-field-caption-top {
  color: red;
}

追加情報

重要なのは、元のcssファイルは外部から取得されて上書きされるため、触れないことです。代わりに、ファイルをラップして、既存のクラスを特定のテーマで使用されるクラスに置き換える方法をLessに指示します。達成できない場合、許容できる解決策は、元のファイルを自動的に変更することです。たとえば、「。caption」のすべての出現箇所を「@caption」（上記のコードサンプルで提案した）に置き換えるか、最初にインポートするなど。次に、ラッパーのLessファイル（テーマの実装を認識）を使用して、どのクラスを何に置き換えるかを指定します。

4

3 に答える 3

3

これを実現するためにエスケープを使用できます。

@selector: '.myclass';

(~'@{selector}') {
    color: red;
}

ただし、これを行うことはできません:

(~'@{selector}') .another {
    color: red;
}

上記を達成するには、変数を変更する必要があります

@selector: '.myclass .another';
于 2012-04-24T16:23:35.060 に答える
2

目的の CSS を生成する 2 つの引数の関数を作成する必要があります。

.generator(@fieldName, @fieldCaption) {
  .@{fieldName}-@{fieldCaption}-top {
    color: red;
  }
}
.generator(foo, bar);

(オンラインの less コンパイラでお気軽に試してみてください)

このコードは、名前が「foo」でキャプションが「bar」の要素に必要な CSS を生成します。.generator必要なものを取得するには、さまざまな引数を使用して関数をさらに呼び出す必要があります。

これが必要なものに対応していない場合は、希望する CSS 出力の例を 1 つ追加してください。

于 2013-06-05T13:51:19.377 に答える
0

ミックスインが必要なようです：

.caption-top {
    color: red;
}
.field-name-field-caption-top {
    .caption-top
}

使用するかどうかに関係なく、他のセレクター内で何度も参照できるクラスを定義できます。それらを新しいスタイルと組み合わせることで、CSSの元のブロックが行っていたものを拡張することもできます。

.field-name-field-caption-bottom {
    font-size: 3em;
    .caption-top
}

コンパイラで試してみてください！

于 2012-04-18T13:12:50.813 に答える