SASS嵌套课程

Question

我有以下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;
    }
}