此篇會教學如何將 Bootstrap 通用類別 utilities 自幹一個出來。

事前準備：

1. 原始碼架構
2. 編譯 sass 環境
3. sass 基礎概念

原始碼

使用到四隻檔案：

• utilities/_api.scss：通用類別主要執行入口。
• _utilities.scss：通用類別參數資料。
• mixins/_breakpoints.scss：負責撰寫最外層 @media 響應式。
• mixins/_utilities.scss：負責生成通用類別樣式。

可以搭配註解看原始碼，Bootstrap 註解算寫的蠻好理解的。

粗略拆為三個部分講解

後續會大量應用到 @mixin、@include、@content 不熟悉的朋友請參考這篇：@mixin 建立專屬語法資料庫（蠻好理解的，最後也有附上 CodePen 範例）

設置斷點 @media 樣式

取得斷點參數的 key（ex：xs、sm、md、lg）將其組合成陣列，再透過迴圈讀取出來。

@each $breakpoint in map-keys($grid-breakpoints) {
}

先撰寫外層 @media 樣式，最後會再依照 utility 參數判斷是否要寫入到斷點中。

@include media-breakpoint-up($breakpoint) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
}

media-breakpoint-up

media-breakpoint-up 來自於 mixins/_breakpoints.scss。

判斷條件：

• 斷點值若為 0 則不撰寫外層 @media 樣式。

@content：代表之後 generate-utility 生成的通用類別樣式。

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

$infix

取得斷點的 point，回傳一個 point 加上 - 符號的字串（ex：-md），用於之後生成樣式時斷點字串。（ex：pd-md-1）

$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

讀取 utility 參數

取得 _utilities.scss 設置的 $utilities: () map，並透過迴圈方式將其參數一一取出。

若還不暸解如何撰寫 utilities 通用類別參數，請參考官方 API 文件。

@each $key, $utility in $utilities {
}

判斷條件

若符合以下兩個條件，才會執行最後的 generate-utility 生成通用類別樣式。

1. $utility 資料是否為 map 資料型態

• 確保後續 generate-utility 在執行邏輯的部分能正常。

2. $utility 資料中，是否有設置 responsive: true

• 僅有在設置響應式斷點為 true 時才會撰寫對應的斷點 @media 樣式，否則只會有一般的通用類別樣式。

@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
}

下一集將解析 generate-utility 是如何生成通用類別樣式。