相對於 Bootstrap 4 來說,我認為 v5 真正發揮特色的地方在於 “變數”
雖然 Sass 可以透過簡短的語法產生大量的 CSS 程式碼,但這也意味著 CSS 檔案會不斷地擴增。因此許多設計概念在 v4 都受到了限制,例如:不同間距的 gutter(v4 只有三種,而這三種已經讓 Bootstrap 額外佔用許多容量)。
到了 v5 以後,除了原有的 Sass 之外,更靈活運用原生的 CSS 變數技巧,這些用法甚至會讓人感覺到「哇~原來變數可以這樣玩」。以格線系統來說,每次新增一種新的 gutter 僅需要增加 3 行 CSS(沒錯,包含 ClassName 就三行;至多不需要超過 5 行)
傳統的 CSS,至少要 60 行以上才能達到此效果,而 CSS 變數的 3 行影響到:
- 12 欄
- 5 種中斷點的欄線
- 外層 .row 的設計
更詳細的 CSS 變數知識
可參考此篇文章:https://wcc723.github.io/development/2021/09/22/css-variables-bootstrap/
Search
classname 用法 在 styled-components使用指南| Curly的Blog 的推薦與評價
classname 重名、覆盖、拼写错误. 自动生成前缀. # 基础用法. # 基本语法. 模版字符串和CSS 组合,生成一个样式化组件( ... ... <看更多>