自定義通用類別 Utilities

• 文件中 Utility API 可透過 Sass 自訂想用的通用類別。
• 通用類別為一個 className 對應一個 CSS 屬性。

客製 Utilities | 基本、縮寫、響應式

客製 Utilities 順序：

1. 基本設定
2. 自訂義前綴類別 ( 縮寫 ）
   1. 可自行決定是否要設定縮寫，如果沒有就會依上方 1. 中 「 property 屬性值 - values 值 」 為 class 名稱。
3. 響應式通用類別
   1. 如果要開啟響應式，就加上此類別。

➊ 基本設定 ：

API 說明 - 假設在 Utilities 定義一個透明度

• 先定義一個透明度的名稱 opacity。

  • "opacity":() 括號內為透明度的相關內容。

  • 定義屬性 property 對應 css 屬性 → property: opacity

  • 定義透明度有五個階級的值 values : 0 ~ 100 冒號後方接 css 屬性的值。

  • 最後會利用迴圈的形式帶出這些內容。

    $utilities: (
      "opacity": (
        property: opacity,
        values: (
          0: 0,
          25: .25,
          50: .5,
          75: .75,
          100: 1,
        )
      )
    );
    

    
    // 出處：六角學院 ↑

➋ 自定義前綴類別 Local CSS variables：

1. 承上新增透明度 utilities，加入 class: 自訂縮寫名, 可使用自訂縮寫名來取代 opacity。

$utilities: (
  "opacity": (
    property: opacity,
		class: o,
    values: (
      0: 0,
      25: .25,
    )
  )
);

// 輸出後
.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }

➌ 響應式通用類別 Responsive：

• 於 responsive 加上 true ，就會開啟中斷點的形式 ( 響應式 )。
• 以上方 opacity 為例，會輸出為 .opacity-{sm,md,lg,xl,xxl}-{0,25,50,75,100}。

$utilities: (
  "opacity": (
    property: opacity,
		class: o,
    responsive: true,
    values: (
      0: 0,
      25: .25,
    )
  )
);

// 輸出後
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
}

@media (min-width: 768px) { ... 同上 }
@media (min-width: 992px) { ... 同上 }
@media (min-width: 1200px) { ... 同上 }
@media (min-width: 1400px) { ... 同上 }

範例 1. 於 utilities 自訂 CSS 屬性

假設要自訂一個 background-size:cover;與 background-position:center center;。

操作步驟 ｜background-size:cover;：

1. 從 node_modules 複製一份 _utilities.scss 檔案存在專案 helpers 資料夾中 ( 資料夾名稱自訂 )。

2. 開啟複製的 _utilities.scss，把要設定的 background-size:cover; 加入。

   1. 就會輸出為 .bg-s-cover、.bg-s-contain、.bg-s-50。

   /*複製的 _utilities.scss*/
   "background-size": (
   	property: background-size,
   	class: bg-s,
   	values: (
   		cover: cover,
   		contain: contain,
   		50: 50%,
   	)
   )
   

3. 開啟 all.scss

   1. import 複製的 _utilities.scss 檔案。
   2. 加入 Utilities API → @import "../node_modules/bootstrap/scss/utilities/api";
   3. 刪除 @import "../node_modules/bootstrap/scss/utilities"; ( 如同客製 variables 檔案一樣 )。

操作步驟 ｜background-position:center center;：

1. 承上

2. 開啟複製的 _utilities.scss，把要設定的 background-position 加入。

   1. 就會輸出為 .bg-p-center。

   /*複製的 _utilities.scss*/
   "background-position": (
   	property: background-position,
   	class: bg-p,
   	values: (
   		center: center center,
   	)
   )
   

資料來源

• 六角學院 - Bootstrap 5 網頁切版整合術