2017-04-04 17 views
0

同じ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 

:あなたは、セレクタの文字列内のすべてのクラスに&を追加することができます

+0

私はそれぞれの状況で必要なものです。 'pages = '.home、.about、.contact'' ' pagesArray =連絡先のホーム' しかし、私はこのソリューションを気に入らないのは、メンテナンスがより難しいからです。 –

答えて

1

pages = '.home, .about, .contact' 

.general 
    {replace('\.', '&.', pages)} 
    a 
     color black 
私はクラスの各グループのための2種類の変数を作成し、使用して終了
+0

ありがとう、とてもきれいです。 –

+0

コンマで変数を追加することはできますか?私が求めていることの例があります... http://codepen.io/anon/pen/jBoLRZリテラルCSSには、私が達成したいと思う結果があります...あなたの助けをありがとう! –

関連する問題