哈囉～今天來聊聊跟@mixin的兄弟

@extend

我們平常在寫css時，時常會把class們相同的樣式提出來，例如

.contain-btn, .wrap-btn, .item-btn {
    padding: 10px;
    background-color: gray;
}

.contain-btn {
    font-size: 36px;
}

.wrap-btn {
    font-size: 24px;
}

.item-btn {
    font-size: 12px;
}

在Sass中@extend也能幫我們做到這件事！
@extend的用法是：

//先在上方將要合併的樣式寫出來
%all-btn {  //在“%”後面加名稱
    padding: 10px;
    background-color: gray;
}
.contain-btn {
    @extend %all-btn; //使用@extend加上%all-btn
    font-size: 36px;
}

.wrap-btn {
    @extend %all-btn; //使用@extend加上%all-btn
    font-size: 24px;
}

.item-btn {
    @extend %all-btn; //使用@extend加上%all-btn
    font-size: 12px;
}

是不是很簡單呢！
不過要注意的是樣式沒有參數的情況下才能使用@extend，
否則還是要請@mixin來幫忙喔！

如果對@mixin與@extend的差別有興趣的話，可以參考：
https://ithelp.ithome.com.tw/articles/10128359