佔位符

有時你將建立不會單獨使用的類，而只是在其他規則集中擴充套件。這意味著編譯的 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;
}