SCSS @extend 與 %

@extend 可以讓現有的選擇器規則，套用至另一個選擇器中，例如我撰寫一個按鈕的樣式如下：

.btn {
    display: inline-block;
    padding: 6px 12px;
}

此時我希望 a、strong 標籤也套用一樣的規則，那我就可以使用 @extend：

.btn {
    display: inline-block;
    padding: 6px 12px;
}

a {
    @extend .btn;
    background-color: #08c;
}

strong {
    @extend .btn;
    background-color: #c08;
}

這時候會匯出以下的 CSS：

.btn ,a ,strong { //將選擇器彙整在一起
    display: inline-block;
    padding: 6px 12px;
}

 .input {
     background-color: #08c;
}

strong {
    background-color: #c08;
}

由於 @extend 整合了選擇器，避免撰寫重複的樣式，因此能適當減少 css 的文件大小。
但有時候我們其實不需要 .btn，只需要使用這個樣式的集合，那該怎麼辦呢？
SCSS 設計了 % 選擇器，它不會匯出選擇器，但卻可以成為被引用的樣式集合，舉例來說：

%btn { //這是一個 %選擇器
   display: inline-block;
    padding: 6px 12px;
}

a {
    @extend %btn;
    background-color: #08c;
}

strong {
    @extend %btn;
    background-color: #c08;
}

此時 %btn 不會被匯出，會匯出下面這樣的 CSS：

a ,strong { //裡面是 %btn 的樣式
    display: inline-block;
    padding: 6px 12px;
}

a {
    background-color: #08c;
}

strong {
    background-color: #c08;
}

將選擇器抽象化之後，我們就可以先預寫很多常用的樣式組合，等到需要的時候一一 @extend 出來就好了。