为什么以及如何在Sass中设置多个类？ [重复]

Question

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

• Sass .scss：嵌套和多个类？ 2个答案

我正在使用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文件？

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

Answer 2

请尝试以下SCSS代码。

.button {
    font-size: 12px;

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

CSS输出

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