为什么以及如何在 sass 中设置多个类？

Question

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

尝试下面的 SCSS 代码。

.button {
    font-size: 12px;

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

CSS输出

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

Answer 2

您的代码不起作用的原因是嵌套与 html 中的 smilier 嵌套相对应，即

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

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

.button {
    font-size: 12px;

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

为什么以及如何在 sass 中设置多个 类？