今天要先來介紹 Sass @each 與 map

Sass map-get

這裡要先宣告變數(有點類似js宣告物件)

$themes:(
    //key    ,   value
    'primary' : rgb(0, 110, 255),
    'secondary' : gray,
    'danger' : red
);
.box-primary{
    background-color: map-get($themes, 'primary' );
}

宣告完變數要記得補上分號

map-get(變數名稱, key值 )
CodePen: https://codepen.io/wemyferb/pen/ExyjrpG

Sass @each
@each 搭配 in

$themes:(
    //key    ,   value
    'primary' : rgb(0, 110, 255),
    'secondary' : rgb(70, 69, 69),
    'danger' : rgb(160, 23, 23)
);

@each $key , $value in $themes {
    .box-#{$key}{
        background-color: $value;
    }
}

CodePen: https://codepen.io/wemyferb/pen/bGedZEa
上述的集合變數($themes)
也稱為 Sass Map

CSS撰寫格線系統

CodePen: https://codepen.io/wemyferb/pen/XWKbGYW

這裡的 max-width : 100%
可以避免內容寬度超過容器時
導致 flex 格線沒有辦法如預期呈現的問題

flex空間計算 可參考https://wcc723.github.io/css/2020/03/08/flex-size/

Sass撰寫格線系統

CodePen: https://codepen.io/wemyferb/pen/zYBGVBQ
這裡有利用到 Sass extend 技巧

@extend 的用途在於整合相同且重複的樣式
有點類似 @mixin
但 @mixin 可以把它想像成一個包裝好的功能只需要引入即可

那我們的 Sass 介紹就到這裡結束啦~~
若有任何問題 或 內容有誤
請別吝嗇的跟我說唷~~