此篇會著重在客製化修改會用到的 sass 基礎語法以及觀念分為上下兩集。

編譯

scss 註解有分為 會被編譯、不會被編譯 兩種。

寫法：//

// 不會被編譯到 css 檔案中

寫法：/**/

/* 會被編譯到 css 檔案中 */

• /**/ 也常被作為多行註解來使用

變數

幾乎全部自定義樣式所需要的變數都由 _variable.scss 作為基底。

!default

• 透過 重新賦值 的特性，將尚未重新被賦予新值的變數，保留預設值的設置。

預設值（若沒有設置其它顏色，則會是黑色）

$paragraph-color : blue;
$paragraph-color : #000 !default;

p {
  color : $paragraph-color;
}

因此在 _variable.scss 檔案中大部分變數結尾都有加上 !default，使開發者進行客製化時，能更方便覆蓋原有的變數。

唯一例外情況：

• 變數前的值是 null 則不會被覆蓋。

$paragraph-color : null;
$paragraph-color : #000 !default;

p {
  color : $paragraph-color;
}

除非變數的預設值被明確設定為 null，否則使用 !default 的預設值在變數已經被賦值的情況下不會生效，因此其權重在這種情況下是最小的。

命名

• 開頭主要會由元件、標籤名稱所組成，或是用途名稱。（ex：$paragraph-margin-bottom、$btn-padding-y）
• 比較看不懂的可以直接用全域搜尋變數名稱，可以看到使用的程式碼，在嘗試比對看看編譯出來 css 樣式，大概就可以暸解它的用途。

命名空間 (Namespaces)

簡化開頭相同的 css 樣式。

舉例 border

// 原本
.box {
  border: 1px solid #000;
  border-radius: 10%;
  border-color: blue;
}

// 簡化
.box {
  border: 1px solid {
    radius: 10%;
    color: blue;
  }
}

sass 內建函式

sass 提供蠻多好用的函式，簡單介紹幾個常用的。

通用

type-of：返回目標類型。

• 語法：type-of(目標)

type-of(#000); // color;
type-of("Kent"); // string;

zip：合併多個陣列（每個陣列長度必須一致，否則會 編譯失敗）

• 語法：zip(陣列, 陣列, ...)

zip(1 2, 3 4) //((1 2), (3 4))
zip(1, 4) // (1, 4)

append：新增資料到陣列中

• 語法：append(目標陣列, 參數)

append: (1px 2px, 3px); // 1px 2px 3px
append((), "Kent"); // (Kent) 將型態轉為陣列

字串操作

針對字串操作的函式。

str-length：返回字串長度。

• 語法：str-length(目標字串)

str-length("Kent"); // 回傳 4

str-index：返回索引值。（搜尋字串中第一次出現的位置，沒搜尋到 則會回傳 null）

• 語法：str-index(目標字串, 要搜尋的字)

str-index("Kent", "K"); // 回傳 1

str-slice：返回擷取後的字串。（從 1 開始，若省略第三個參數則會預設擷取到字串最後）

• 語法：str-slice(目標字串, 起始位置, 結束位置)

str-slice("Kent", 1 ,3); // 回傳 Ken
str-slice("Kent", 2); // 回傳 ent

陣列操作

針對陣列操作的函式，索引值從 1 開始。

length：返回陣列長度。

• 語法：length(目標陣列)

$color: (#000 #fff #111)
length($color) //3
length(1px 2px 3px) //3

index：返回索引值。（搜尋陣列中第一次出現的索引值，沒搜尋到 則會回傳 null）

$color: (#000 #fff #111)
length($color, #000) //1
length(1px 2px 3px, 3px) //3

nth：返回該索引的值。（獲取陣列中對應位置的值，沒搜尋到 則會編譯錯誤。）

$color: (#000 #fff #111)
length($color, 1) //#000
length(1px 2px 3px, 3) //3px

map 操作

針對 map 型態操作的函式。

map-get：返回取的值
map-has-key：返回布林值。（搜尋 map 中 key 值是否存在）
map-keys：返回陣列。（由所有 key 值所組成）
map-values：返回陣列。（由所有 value 值所組成）
map-remove：刪除 map 指定的 key 資料。（若 key 不存在 map 中，則會回傳和之前一樣的 map）
map-merge：合併兩個 map。

$font-sizes: (
  "1": 1rem,
  "2": 2rem,
  "3": 3rem
);

map-get($font-sizes, "2"); // 2rem
map-has-key($font-sizes, "2"); // true
map-keys($font-sizes) // ("1", "2", "3")
map-values($font-sizes) // (1rem 2rem 3rem)

map-remove($font-size, "3"); //("1": 1rem, "2": 2rem)

map-merge($font-sizes, (
  "4": 4rem,
  "5": 5rem
)); 
//("1": 1rem, "2": 2rem, "4": 4rem, "5": 5rem)

想了解更內建函式請參考官方文件：Built-In Modules

連接符號

-、_ 符號

• 對於 scss 宣告 變數名稱 或 函式名稱 時是相同的。

變數範例

$banner_title: 87px;

.banner {
  font-size: $banner-title;
}

覆蓋特性

$banner-title: 87px;
$banner_title: 987px;

.banner {
  font-size: $banner-title;
}

函式範例

@function mix_color($color1, $color2) {
  @return mix($color1, $color2);
}
.text-color {
  color: mix-color(#010203, #040506);
}

⚠️ 注意

• 只有在 變數名稱 或 函式名稱 使用上才是相同，如果是 樣式名稱 就不同了。

& 符號，用於連接的父層撰寫巢狀結構（類似 BEM 命名結構）

.banner {
  &-title {
    font-size: 3rem;
  }
  &-color {
    color: red;
  }
}

編譯後的 css

.banner-title {
  font-size: 3rem;
}
.banner-color {
  color: red;
}

巢狀結構真的寫過都說讚，寫到後面根本無法離開。

想了解更多符號請參考官方文件：Style Rules

下一集將介紹資料型態、運算符號、插補。