Day 06 | 加強 SCSS - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 6

自我挑戰組

菜鳥前端修練之旅系列第 6 篇

Day 06 | 加強 SCSS

14th鐵人賽

佐料

2022-09-21 10:07:43

626 瀏覽

分享至

雖然一直以來都有在用 SCSS，但都只用到簡單的 mixin 或是變數，其他的 map、function 之類的都完全沒在使用，直到最近才開始接觸它們，這篇就來筆記一下。

預設變數 !default

!default 的用法是：只要被賦予新的值後，就會套用新的值。

使用方法是在變數後面新增 !default。

$red: #8B0000 !default;

@content

@content 主要是用來傳內容到 @mixin 內的。

只要有寫上 @content，就能在其中定義自己的屬性，例如以下

@mixin font($size, $color) {
    font-size: $size;
    color: $color;
    @content;  // 傳遞用
}

接下來在 @include 時就可以自行編寫內容到裡面：

.font {
    @include font(12px, blue) {
        background-color: red;
    }
}

如果沒使用 @content 的話，@mixin 就只能帶原本的參數。

.font {
    @include font(12px, blue)
}

map

SCSS 中也能像程式語言使用 map 存放資料，增加可讀性。

使用 () 代表 map 範圍，內容是 key & value 的組合，當然 key 是不能重複的。

範例如下：

$color_map: (
    red: #8B0000,
    black: #000
    blue: #4169E1
);

接著在 css 中使用 map-get() 就能取得 map 中的值：

.btn-red {
    background-color: map-get($color_map, red);
}

除了基本的取值外，map 系列的相關方法還有：

map-merge($map1,$map2)：合併兩個 map。
map-remove($map,$key)：刪除指定的 key。
map-keys($map)：取出所有 key。
map-values($map)：取出所有 value。
map-has-key($map,$key)：確認有無 key。

list

另一種存放資料的類型是 list，就像是 array 一樣，不過是使用括號。

例如下面的 $colors 裝著三筆資料：

$colors: (red, blue, green);

接著透過 nth 取得 list 中的值，而 nth 可以帶兩個參數：

list：需要取得的原始 list。
index：要取得第幾項。

.btn {
    background-color: nth($colors, 1) 
}
// 取得 $colors 的第一筆，所以是 red

@each

上面的方式都要透過 map-get 或 nth 取得該值，實在有點麻煩，我們可以透過 @each 一次將樣式產生出來。

@each 的語法是 $key, $value in $map（或是 list）。

下面直接產生各個 .btn 的 class。

$color_map: (
    red: #8B0000,
    black: #000,
    blue: #4169E1
);

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

編譯後的 CSS：

.btn-red {
  background-color: #8B0000;
}

.btn-black {
  background-color: #000;
}

.btn-blue {
  background-color: #4169E1;
}

@function

@function 就跟我們平常在寫函式一樣，不過這邊的 @function 必須要回傳值（return）。

@function fn1($font_size){
    @return $font_size *2
};

.btn {
    font-size: fn1(16px);
}

以上面這個例子，.btn 的字體大小會是 32px。

當然我們也可以放預設值在 function 中：

/* 預設 16px */
@function fn1($font_size: 16px){
    @return $font_size *2
};

.btn {
    font-size: fn1();
}

@if

這邊就跟其他語言的判斷式一樣，不過使用上前面要加上小老鼠 @，我們拿上面的範例做修改：

/* 根據傳入的參數做判斷，並回傳值 */
@function fn1($font_size){
    @if($font_size == 16px){
        @return $font_size
    } @else {
        @return $font_size *20
    }
};

需要注意的是，運算符號不會使用 JS 中的 ===，而是使用一般的 ==、!=。

除此之外 &&、|| 會寫成 and、or、not。

這篇就先簡單介紹到這邊，SCSS 中還有 @for、@while 等很多用法以及進階變化，這邊就請有興趣的朋友們自行 google 囉。