Bootstrap 5.2 主要更新：幾乎全部元件都用 CSS 變數實作，新的 CSS build sequence

商業，創業，業務開發，自媒體經營，生活美食，時事分析。

這是我的 FB粉專以及 IG，我也滿常使用 Threads，歡迎大家追蹤互動~

在創業、職涯、人生的路上，希望大家一起陪伴與成長。

圖片來源 https://blog.getbootstrap.com/2022/05/16/using-bootstrap-css-vars/

https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/
前幾天 (2022/7/19) Bootstrap 5.2 發布了。每次看到 Bootstrap 新版本的發布，都會有感於時間過的真的很快。以下是我關於 Bootstrap 的文章，大致的時間線：

2021年8月：Bootstrap 5.1 主要更新
2020年12月：Bootstrap 5 主要更新
2018年4月：Bootstrap 4 Flex (那時 Bootstrap 4.1 發布)
2017年8月：Bootstrap 4 主要更新

撰文的現在是2022年7月。可以看到每一個 Bootstrap minor version 的更新，就是半年～1年。更甭論 major version 的更新是好幾年一版。所以每次寫 Bootstrap，就代表好多歲月又過去了。

以下是 Bootstrap 5.2 的主要更新：

官網首頁重新設計，以及文件網頁優化

重新設計了 Bootstrap 官網首頁，文件網頁也有多處優化，包含左側 menu 的重組，文件搜尋的使用體驗，等等。

更新按鈕樣式

border-radius 調大了一點，雖然按鈕大小跟之前一樣，看起來好像 padding 變小而文字更突出的感覺。

幾乎全部元件都用 CSS 變數 (custom property) 實作

比 Bootstrap 5.1 更多的 CSS 變數實作，幾乎全部元件都是。

新的 _maps.scss

有一個新的 scss/_maps.scss (Bootstrap 5.1 沒有)。_maps.scss 將一些 Sass map 從 _variables.scss 抽出。修正對原始 Sass map 修改時，基於原始 Sass map 擴展的 map，不會繼承這些修改的問題。

舉例來說 $utilities-colors 基於 $theme-colors 擴展。因為 Bootstrap 5.1 $utilities-colors 在 _variables.scss 就定義生成了，所以在

@import "variables";

之後對 $theme-colors 的修改，都不會繼承到 $utilities-colors (它已經生成了)。

而 Bootstrap 5.2 $utilities-colors 移到 _map.scss，整個架構上會比較清楚，你的 Bootstrap CSS build 順序可以參考：

// Functions come first
@import "functions";

// Your optional variable overrides here

// Variables come next
@import "variables";

// Your optional Sass map overrides here

// Third the default maps
@import "maps";

// The rest
@import "mixins";
@import "utilities";
@import "root";
@import "reboot";

新的 CSS helpers and utilities

新的 .text-bg-{color} helper，使用 .text-bg-{color} 可以直接設定 background-color 和文字顏色，而不是兩個 css class 個別設定。

font-weight 方面新增 .fw-semibold (font weight 600)。border-radius 方面新增 .rounded-4 (border radius 1rem) .rounded-5 (border radius 2rem)

Responsive offcanvas

Bootstrap 5.2 可以使用 .offcanvas-{sm|md|lg|xl|xxl}，例如 .offcanvas-lg，在 viewport 大於 lg breakpoint 時，已經顯示的 offcanvas 會隱藏。

Bootstrap 5.0、5.1 就開始使用的 .offcanvas class 仍然存在，使用 .offcanvas 顯示就不隨 viewport 大小而改變。

compile CSS Grid 版本時可以包含 container class

scss/_variables.scss 新增了一個變數 $enable-container-classes，如果是 true，當 compile 成 CSS Grid 版本，container class 仍然會 compile 進去 (5.1 之前不會)。

結論

Bootstrap 5.2 沒有大的架構更新，就是多了一些 CSS helper class。CSS 變數的使用幾乎遍及所有元件，所以大家要知道 CSS 變數的使用是一個趨勢。也要稍微知道一下新的 _maps.scss，它的邏輯是什麼，Bootstrap 5.2 CSS build 的順序是什麼。