2012-04-17 22 views
3

これは、既存の一般的なCSSルール(元のファイル)である:実際のケースでは、私はコンテキストに応じて、何か他のものになるために.caption-topセレクタを必要とするのでCSS:セレクタ置換?

.caption-top { 
    color: red; 
} 

これは、概略図です。しかし、私はセレクターのすべての出現を変更する代わりに、変数を使用したいと思います。たとえば、あるコンテキストでは、.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"(上記のコードサンプルで提案したもの)に置き換えるか、冒頭などにインポートしてください。次に、ラッパーを使用して、何に置き換えられますか?

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

あなたは使用または、あなたは、他のセレクタの内側に何度も何度も参照することができない、クラスを定義することができます:それはミックスインのように見える

+0

[mixins](http://lesscss.org/#-mixins)はそうではありませんか? – cchana

+0

私は知らない。しかし、あなたが[less less tool](http://leafo.net/lessphp/#demo)に行き、上記のコードを入力すると、致命的な解析エラーが発生します。 – camcam

答えて

0

は何が必要です。それらを新しいスタイルと組み合わせることで、元のCSSのブロックを拡張することもできます。

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

コンパイラを使ってください。

@selector: '.myclass'; 

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

あなたがこれを行うことはできませんしかし:

2

あなたはこれを達成するためにエスケープに使用できる

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

はあなた以上変更する必要があります達成するために、変数

@selector: '.myclass .another'; 
+1

'&'もどうやって使うことができますか? '&(〜 '@ {selector}').another {}'は動作しません。 –

2

あなたは、目的のCSSを生成する2つの引数の関数を生成する必要があります:

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

online less compilerでこれを試してみてくださいお気軽に)

コードのこの作品は、名前「foo」とキャプション「バー」を持つ要素のために必要なCSSを生成します。あなたは、必要なものを得るために、引数が異なる.generator関数への呼び出しを増やすだけです。

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