使用SASS的嵌套类[重复]

Question

这个问题已经在这里有了答案：

• 使用SASS连接嵌套类[重复] 1个答案

我有以下CSS / SASS。

.socialMedia__button{
    display:block;
    text-align:center;
    padding:10px;
    border: 2px solid;
    border-radius: 5px;
    color:#fff;
    width:100%;
    .facebook {
        background:#3c5b99;
    }
    .twitter {
        background:#429aff;
    }
}

HTML是：

<p>
  <a href="#" class="socialMedia__button facebook">Sign up with Facebook</a>
</p>

但是，我的HTML似乎无法识别facebook部分。 为什么是这样？

谢谢

Answer 1

您的SASS将编译为此：

.socialMedia__button .facebook

但是您实际上想要这样：

.socialMedia__button.facebook

尝试使用此SASS：

.socialMedia__button{
    display:block;
    text-align:center;
    padding:10px;
    border: 2px solid;
    border-radius: 5px;
    color:#fff;
    width:100%;
    &.facebook {
        background:#3c5b99;
    }
    &.twitter {
        background:#429aff;
    }
}

Answer 2

...
&.facebook {
   background:#3c5b99;
}
&.twitter {
   background:#429aff;
}
...

使用您的代码，您将引用元素.facebook以及元素.socialMedia__button

如果要使用2个类引用SAME元素，则需要使用“＆”。

希望能帮助到你