为什么以及如何在 sass 中设置多个类？ [复制]答案

【问题标题】：Why and how to set multiple classes in sass? [duplicate]为什么以及如何在 sass 中设置多个类？ [复制]
【发布时间】：2015-03-26 04:36:31
【问题描述】：

我使用Sass，在html文件中看到很多多个类，比如：

<a href="#" class="button white">a link</a>

为什么要使用多个类？

看来css 应该是：

.button {
    font-size: 12px;
}

.button.white {
    background-color: #fff;
}

但是为什么这不起作用：

.button {
    font-size: 12px;

    .white {
        background-color: #fff;
    }
}

那么如何使用sass 简化css 文件？

【问题讨论】：

您使用多个类的原因与您在 CSS 中使用多个类的原因相同：例如也许您希望该元素具有 button 和 white 类，但您希望另一个元素具有 button 和 blue 类。

标签： css sass

【解决方案1】：

您的代码不起作用的原因是嵌套对应于 html 中的更微笑的嵌套，即

<div class="button">
    <div class="white">This would get a background of #fff</div>
</div>

要得到你想要的，你应该使用 & 作为父选择器的别名：

.button {
    font-size: 12px;

    &.white {
        background-color: #fff;
    }
}

【讨论】：

【解决方案2】：

试试下面的 SCSS 代码。

.button {
    font-size: 12px;

    &.white {
        background-color: #fff;
    }
}

CSS 输出

.button {
    font-size: 12px;
}
.button.white{
    background-color: #fff;
}

【讨论】：