同じCSSルールをいくつかのセレクタに割り当てたいのですが、通常は変数に複数のクラスを割り当てます。複数のクラスを持つStylus変数を作成し、コンパイルで連結する
pages = '.home, .about, .contact'
{pages}
a
color black
これはで得られます。
.home a, .about a, .contact a {
color: black;
}
しかし、私は、私はそれが可能である場合には、エレガントな方法で解決したい問題があります。それでは、私は例えば、別のものと連結し、同じ変数を使用したいとしましょう:
.general
&{pages}
a
background-color black
予想される方法で、この利回り:
.general.home a, .general .about a, .general .contact a {
background-color: black;
}
私は「ダブルクラス」を生成したいと思います最初のセレクタだけでなく、それぞれの場合のセレクタ。このために私は働く反復メソッドを使用しようとしましたが、私はまったく満足していない:
pages = home about contact
.general
for class in pages
&.{class}
a
color black
この収率は中:
.general.home a { color: black; }
.general.about a { color: black; }
.general.contact a { color: black; }
これは悪くないですが、私が欲しいとき最初の方法で同じ変数を使用する(これは私がこの変数に与える最も一般的な使い方です)、正しいセレクタ構文でコンパイルしていないのでできません。
これを達成する方法はありますか?
ありがとうございます! replace
BIFでさえ自動的
pages = '&.home, &.about, &.contact'
.general
{pages}
a
color black
:あなたは、セレクタの文字列内のすべてのクラスに&
を追加することができます
私はそれぞれの状況で必要なものです。 'pages = '.home、.about、.contact'' ' pagesArray =連絡先のホーム' しかし、私はこのソリューションを気に入らないのは、メンテナンスがより難しいからです。 –