bootstrap5 / mixin / _breackpoints

此文章為閱讀 Bootstrap5 mixins/_breackpoints.scss 原始碼而寫的筆記。

原始碼出處
https://github.com/twbs/bootstrap/blob/main/scss/mixins/_breakpoints.scss

縮寫

1. 內文提及 Bootstrap 處將隨意縮寫為BS。
2. BS 耳熟能詳的 sm/md/lg...等 breakpoints 們（斷點們）將隨意縮寫為 bk。 

前言

breakpoint 系統是 Bootsrtap 實踐響應式的根基^1，此份源碼提供 BS 實作 bk 系統的基礎建設。研讀這份源碼將有助於使用 BS 提供的 bk 相關基礎 func / mixin 工具，不必自己重造輪子即可更便利打造自己需求的新輪子。

^1 詳見官方文件：https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints

結構摘要

1. 該源碼位於 mixins 資料夾裡，表示源碼裡都是 scss functions 或 scss  mixins。
2. 全文分成：四個 functions + 四個 mixins
3. 這些 funcs / mixins 都需輸入一個 breakpoints map，BS直接預設^2為 $grid-breakpoints^3。因自身專案大部份遵循 BS 的 responsive 系統，沿用這些預設值而無更改。因此後文 funcs / mixions 筆記中，輸入參數沒有完全介紹，若有額外需求可另行參照原始碼。
4. 若要讀懂這些 funcs、mixins 的運作原理，推薦熟記變數 map $grid-breakpoints 的內容（或複寫在紙張上搭配閱讀），在官網文件^3 或原始碼 variables.scss 皆可找到 $grid-breakpoints 整個 map 的完整宣告內容。
   

^2 輸入預設值
function 輸入預設值之SCSS官方文件：
https://sass-lang.com/documentation/at-rules/function#optional-arguments
mixin 的輸入預設值之SCSS官方文件：
https://sass-lang.com/documentation/at-rules/mixin#optional-arguments

^3  $grid-breakpoints 即 BS 耳熟能詳的 sm/md/lg...等的相關設定變數，請見 Boostrap5 官方說明：https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints

四個 function

若目標是後文四個 mixins 都必須知曉其運作，推薦四個 func 皆需全數了解。若只以工作需求^4、使用頻率來說，推薦學習最常用的 breakpoint-infix 即可。

1. breakpoint-next
   輸入 bk，輸出 breakpoints map 內的下一個 bk；若 bk 是 map 內最後一個斷點，則回傳 null。
1. 注意：這裡「下一個」的順序，指的是 map 裡，bk 排列的順序，而非 bk 值（代表斷點基準的螢幕寬度）的大小順序。如果前先已對 $grid-breakpoints 增減斷點，需注意可能會改變斷點在 map 裡的排列順序，使得 breakpoint-next 的輸出結果不如自己預期，也進階影響到有使用這個 func 的 mixin media-breakpoint-only。
2. 承1. 這代表自訂 breakpoint map 時，需人為排列，將斷點由小到大依序宣告。
   
3. 此 func 主要用在：
1. media-breakpoint-only
2. _navbar.scss
2. breakpoint-min
   輸入 bk，輸出「代表斷點基準之螢幕寬度的bk值」；若 bk 值為零，代表 bk 是第一個斷點，則回傳 null 。
1. 此 func 是組成常用 mixin media-breakpoint-up 的靈魂。
   
2. 此 func 主要用在：
1. media-breakpoint-up
2. media-breakpoint-between
3. media-breakpoint-only
3. breakpoint-max
   輸入bk，輸出 「bk值 -.02px」；若 bk 值為零，代表 bk 是第一個斷點，則回傳 null 。
1. 設計「減去.02px」是因為Safari bug
2. 此 func 主要用在：
1. media-breakpoint-down
2. media-breakpoint-between
3. media-breakpoint-only
4. breakpoint-infix
   輸入bk，輸出字串 「-bk」；若 bk 值為零，代表 bk 是第一個斷點，則回傳空字串「""」。
1.  infix 的中文意思就是「字根中綴」
2. 顧名思義是在處理 .class-bk 時的常用 function。
3. 四個 func 裡，在BS源碼中使用頻率最高
4. 自製 mixin 最常用，必學最推薦。
   
5. 承4. 常見使用情境：引用 map $grid-breakpoints 做 .class-bk 的批次處理時，必須搭配此 func 使用，以處理 $grid-breakpoints 中 xs 斷點在 class name 裡的中綴問題。 xs 是 $grid-breakpoints 的第一個斷點，即在 mobile first 的框架下，xs 為預設值，不需在 .class 後掛上任何 bk 中綴。
   

^4 實際的工作需求，如：

1. 需撰寫與響應式功能有關的 mixin 時。
2. 需熟悉其他與 breakpoint 相關的BS classes 製造，作為客製修改時的儲備知識。

四個 mixin

1. meida-breakpoint-up
• 在 BS 或任何 mobile first 的設計準則下，最常使用的 mixin。
2. meida-breakpoint-down
3. meida-breakpoint-between
4. meida-breakpoint-only
• media-breakpoint-only(md) 等同於 meida-breakpoint-between (md,lg)
  

四者用途及各別特性，官網文件有清楚說明^5，此文只補充該處沒提到的用法。

1. 可以直接使用在 class 內部^6及 scss 的槽狀結構^7
   
2. BS 預設 map 輸入值，$breakpoints，為 $grid-breakpoints。
3. 承2. 這將使自己編寫 mixin 時更便利。在沿用 BS 的 bk 系統之下，搭配 @each 迴圈使用時，不必額外處理遇到斷點 sm 時 css 宣告式不需放入 meida query 的需求，他們會跳過 media query 直接宣告出來。 

但如果不是沿用 BS $grid-breakpoints ，而是額外輸入其他 map，上述前三個 mixin 仍會偵測：當 bk 不在 map 的 key 中或 bk 值 = 0 時，不會將 css 宣告式放入 media query，而會直接在mixin 引用的位置中宣告出來。與此同理，重提上面第三點：在 BS 的 bk 系統之下， $grid-breakpoints 中 sm:0，即：bk 是 sm 時，sm 代表的值 = 0，因此也不會將 css 宣告式放入 media query。雖然前述三個 mixin 都不會改變輸出結果，但是使用 meida-breakpoint-only 時，根據 func breakpoint-next 第一點，則需要配合將輸入的 map 依照斷點大小排列，才能得到預期的輸出。

^5 BS Media queries
https://getbootstrap.com/docs/5.0/layout/breakpoints/#media-queries

^6 請見此段的範例程式碼
https://getbootstrap.com/docs/5.0/layout/grid/#example-usage

^7 SCSS Nesting
https://sass-lang.com/documentation/style-rules#nesting