哈罗～今天来聊聊跟@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