基本SASS - 嵌套和HTML语法

Question

我刚开始使用SASS，但我似乎无法找到明确的答案/示例。

说我有：

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

我现在想为Facebook和谷歌一些额外的风格 - 有一些聪明的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。