bootstrap4 升級到 bootstrap5

2022/11/21更新 v5.1 到 5.2

版本v5

現在才發現 BS5 幾個重要的 map 變數，如

1. $theme-color
2. $grid-breakpoints
3. $container-max-widths
   

宣告的方式改變了。

BS4 用 map-merge，可以修改已有key的值，但不容易移除整組 key value pair，舉例：某專案為求精簡需移除較少用的 theme-color $info之類。需在 _variables.scss 引用後、其他引用檔宣告前，使用 SCSS 內建 function:map-remove 才能刪除該組 key value pair，而且和平常宣告BS 變數的自訂值的宣告位置不同，需在 _variables.scss 引用前就需宣告。因此除了map 的操作，有時又需修改引用順序。

但是 BS5 直接移除 map-merge， 同名 map 設定完後，就直接覆蓋原參數map。

其實官網也有文件^1寫得清楚仔細，有講明這一點，但當時閱讀目的主要是針對框架使用時的 class 名稱與結構的變更，沒有注意到原始碼這塊。

class類變動最多大概就是utilties，

1. 左右從left、right→start、end
1. .ml, .pl →.ms, .ps %s/\([mp]\)l/\1s/g
2. .mr, .pr →.me, .pe %s/\([mp]\)r/\1e/g

^1 https://getbootstrap.com/docs/5.0/migration/

v5.1 到 v5.2

1. 大家終於受不了$variable-prefix太長（編譯出來只有「bs-」）把它縮寫為$prefix XDD
   不過還是比bs-還長很多阿 XDDD 大家需要一個縮寫前綴的縮寫
   每次要符合bs規範寫css variable的時候都像在懲罰自己 >/////<
   很想眼睛一閉寫hard core阿 ㄏㄏ
2. 版本資訊不再用hard code寫在import檔裡。改為mixin代勞。@ import "mixins/banner";
@ include bsBanner("");