占位符

有时你将创建不会单独使用的类，而只是在其他规则集中扩展。这意味着编译的 CSS 文件将比它需要的大。占位符选择器解决了这个问题。

占位符选择器与类选择器类似，但它们使用百分比字符（％）而不是用于类的（。）。它们不会出现在已编译的 CSS 中。

%button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
} 

.error-button {
    @extend %button;
    background-color: #FF0000;
}

.success-button {
    @extend %button;
    background-color: #00FF00;
}

这将编译为以下 CSS：

.error-button, .success-button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
}

.error-button {
    background-color: #FF0000;
}

.success-button {
    background-color: #00FF00;
}