ネスティング複数の同じタイプのクラス1つの親内部

Question

私は以下のようなクラスを作成します：

.colored{ 
    &{ 
      .red{background-color:red;} 
      .blue{background-color:blue;} 
      .gray{background-color:gray;} 
     } 
} 

をし、それが動作していないが、私はこのように書いた場合：

.colored{ 
      &.red{ 
       background-color:red; 
      } 
      &.blue{ 
       background-color:blue; 
      } 
      &.gray{ 
       background-color:gray; 
      } 
} 

それが動作します。最初のバージョンが期待どおりに機能しない理由はありますか？

Answer 1

理由：

それはあまりであるための方法ネスティング作品である（と動作するようになっています）。セレクタを別のセレクタの下にネストすると、内部セレクタは、外部セレクタによって表される要素の子である要素に適用可能とみなされます。

以下は、コード

.colored{ 
    &{ 
     .red{background-color:red;} 
     .blue{background-color:blue;} 
     .gray{background-color:gray;} 
    } 
} 

ある（&が.colored親セレクタによって置換されるので）、私は先に述べたように、これはコンパイルなる今

.colored{ 
    .red{background-color:red;} 
    .blue{background-color:blue;} 
    .gray{background-color:gray;} 
} 

以下と等価です.colored .red,.colored .blue,.colored .gray（セレクタ間のスペースに注意してください）。

.redの直前に&を挿入すると、。 blue、。 grayは、親セレクタとネストされたセレクタが同じ要素（子ではない）に適用されることを意味します。出力するセレクタは.colored.red,.colored.blue,.colored.gray（空白がないことに注意してください）です。

---

ソリューション：

これは、あなたの質問と同じコードであり、それは推奨ソリューションです。私はそれを完了させるためだけに答えに再び投稿しています。

.colored{ 
    &.red{ 
     background-color:red; 
    } 
    &.blue{ 
     background-color:blue; 
    } 
    &.gray{ 
     background-color:gray; 
    } 
}