基本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"/>

'＆amp;'语法将匹配具有外部类和类的元素与＆amp;选择。您可以使用更具体的嵌套选择器覆盖'socialIcons'类。无需更改Sass。