基本的なSASS - ネストとHTML構文

Question

私はSASSを使い始めましたが、明確な答え/例は見つかりませんでした。

は、私が持っていると言う：

<img class="socialIcons" src="/images/facebook.png"/> 
<img class="socialIcons" src="/images/google.png"/> 

私は今、FacebookとGoogleのためのいくつかの追加のスタイルを持つようにしたい - 私は得る私には、例えば使用することができますいくつかの巧妙なSASSの構文があります：

<img class="socialIcons-facebook" src="/images/facebook.png"/> 
<img class="socialIcons-google" src="/images/google.png"/> 

は、私のSASSでの使用：

.socialIcons { 
    max-height: 30px; 
    padding-right: 10px; 

    &.facebook { 
    background: blue; 
    } 
} 

したがって、一般的なsocialIconsスタイルFacebookと同様です。

構文を理解できないようです。

ありがとうございました。

Answer 1

これは意味ですか？

<img class="socialIcons facebook" src="/images/facebook.png"/> 
<img class="socialIcons google" src="/images/google.png"/> 

「&」の構文は、&セレクタと外側のクラスとクラスの両方を有する要素にマッチします。 'socialIcons'クラスをより具体的なネストされたセレクターで上書きすることができます。 Sassを変更する必要はありません。