使用 SASS 嵌套类 [重复]答案

【问题标题】：Nesting class with SASS [duplicate]使用 SASS 嵌套类 [重复]
【发布时间】：2015-01-10 21:16:03
【问题描述】：

我有以下 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 部分。这是为什么呢？

谢谢

【问题讨论】：

对不起，我错过了 SASS 部分

标签： css facebook sass

【解决方案1】：

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

使用您的代码，您指的是元素 .facebook INSIDE 元素 .socialMedia__button

如果要引用具有 2 个类的 SAME 元素，则需要使用“&”。

希望对你有帮助

【讨论】：

【解决方案2】：

您的 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;
    }
}

【讨论】：