SASSで同じ要素の複数のサブクラスを参照する方法

Question

私はSCSSコードを書くSMACSSメソッドを使用していますが、別のサブクラスも持っていれば参照したいサブクラスがあります。

HTML

<div class="parent-class parent-class-subclass1 parent-class-subclass2"> 

SCSS

.parent-class { 
    &-subclass1.&-subclass2 { 
    //Styles here 
    } 
} 

私はこれを行うことができますどのように任意のアイデア？

Answer 1

ので、親要素も& & subclass2をsubclass1したときに、スタイルを適用しますか？

@ katniss.everbeanはい、あなたが書いたとおりに、コードを複製する必要があります。

しばらく検索した後、私は＃{} &のように最初の1の後に任意の&参照を書き込むことで完璧に動作します。このソリューションつまずい：

SASS

.parent-class { 
    &#{&}-subclass1#{&}-subclass2{ 
     border: 1px solid red; 
    } 
} 

コンパイル（CSS）

.parent-class.parent-class-subclass1.parent-class-subclass2 { 
    border: 1px solid red; 
} 

私はSASS GitHub pageでそれを見つけました。

Answer 2

あなたはこの

<div class="parent-class subclass1 subclass2"> 

.parent-class { 
    &.subclass1.subclass2 { 
    //Styles here 
    } 
} 

か、あなたもこの

.parent-class { 
     &.subclass1 { 
     //subclass1 Styles here 
     &.subclass2 { 
      //subclass1 & 2 Styles here 
     } 
     } 
    } 

Answer 3

のようにそれを行うことができますようにそれを行う必要があります...と私は、私もそれならば参照するサブクラスを持っています別の サブクラスを持っています。

ので、親要素も& & subclass2をsubclass1したときに、スタイルを適用しますか？

ネストしたセレクタを親クラスに兄弟として追加する必要があるのは&です。次に、2つのサブクラスを通常の兄弟セレクタとして記述します（間にスペースを入れずに隣り合って、両方の兄弟クラスが必要であることを示します）。

SCSSは次のようになります。

.parent-class { 
    //some styles 
    &.parent-class-subclass1.parent-class-subclass2 { 
    //subclass styles 
    } 
} 

全サブクラスの名前を書く必要があなたのモジュラー命名構造を維持していないために、以下のCSS

.parent-class { 
    //some styles 
} 

.parent-class.parent-class-subclass1.parent-class-subclass2 { 
    //some other styles 
} 

にequivelantだこと、あなたに可能性ワイルドカードセレクタを使用してみてください。私はそれが実際にクラス名全体を書き出すよりも、実際には何の面も見ていないのか分かりません。

http://codepen.io/anon/pen/vXKZYA

をそして後世のためにそのペンでの基本的なコード：

はここで実証codepenだ

<div class="parent-class parent-class-subclass1 parent-class-subclass2"> 
    some text that has all the goods 
</div> 

.parent-class { 
    color: #0000ff; 
    &[class*="-subclass1"][class*="-subclass2"] { 
    font-size: 20px; 
    font-family: sans-serif; 
    } 
}