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

Answer 2

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

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

如果您想使用2个类引用SAME元素，则需要使用＆＃34;＆amp;。＆＃34;

希望有所帮助

使用SASS嵌套类

2 个答案: