Day12 | 客製 Bootstrap 中的 Utilities

發表於 分類於
自定義 Bootstrap 中的 Utilities

自定義通用類別 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 屬性的值。

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      $utilities: (
        "opacity": (
          property: opacity,
          values: (
            0: 0,
            25: .25,
            50: .5,
            75: .75,
            100: 1,
          )
        )
      );

    // 出處：六角學院

➋ 自定義前綴類別 Local CSS variables

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

     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $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}。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    $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;：

➀ 從 node_modules 複製一份 _utilities.scss 檔案存在專案 helpers 資料夾中 ( 資料夾名稱自訂 )。
② 開啟複製的 _utilities.scss，把要設定的 background-size:cover; 加入，就會輸出為 .bg-s-cover、.bg-s-contain、.bg-s-50。

1
2
3
4
5
6
7
8
9
10
// 複製的_utilities.scss
"background-size": (
  property: background-size,
  class: bg-s,
  values: (
    cover: cover,
    contain: contain,
    50: 50%,
  )
)

➂ 開啟 all.scss

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

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

➀ 承上
② 開啟複製的 _utilities.scss，把要設定的 background-position 加入，就會輸出為 .bg-p-center。

1
2
3
4
5
6
7
8
// 複製的 _utilities.scss
"background-position": (
  property: background-position,
  class: bg-p,
  values: (
    center: center center,
  )
)

資料來源

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