iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

使用SASS(SCSS)建立自己的CSS Library系列 第 20

[Day 20] Sass - Using @extend

哈囉~今天來聊聊跟@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


上一篇
[Day 19] Sass - Functions
下一篇
[Day 21] Sass - Media Query
系列文
使用SASS(SCSS)建立自己的CSS Library21

尚未有邦友留言

立即登入留言