相對於 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/
sass語法 在 卡斯伯 Facebook 的最佳貼文
2020 CSS 大調查
從 CSS 使用技術、語法、架構甚至是薪資都完整分析
重點數據:
- Sass 是滿意度偏高及最多使用者的預處理器
- Bootstrap 滿意度中等,但是是最多人使用的 CSS 框架
- Tailwind 及 Bootstrap 5 的變化,可以看到 utility 概念崛起(Atomic CSS)
- 主流文字編輯器為 VSCode,付費編輯器主流為 WebStorm
- 半數以上的人認為 CSS 容易學
- CSS 是一種程式語言,開始越來越多人同意(但未達 50%)
- 7 成的開發者喜歡寫 CSS
- 這份調查八成來自於英語系國家
State Of CSS 中文版
https://2020.stateofcss.com/zh-Hant/
#stateofcss
sass語法 在 卡斯伯 Facebook 的最佳解答
昨天的 Sass + Bootstrap 製作甜點電商影片已上傳!
稍作修剪一下,超過 1 小時的影片精華讓大家複習
以下回答大家可能有問題的地方:
- 為何是使用 ejs
貫徹懶得原則,Bootstrap 的文件複製直接貼上
- 為何不是使用 sass 而是 scss
以前我都是使用 sass
但在有次改版後,新的語法在 sass 中難以使用
(sass map,BS4 中有大量使用)
所以往後果斷改用 scss
----
影片:https://yt1.pics.ee/AT62G
活動設計稿:https://lihi.cc/LAfsC
講義:
https://paper.dropbox.com/doc/103--AOVpiBNhVi8T5cXyFewnp5fRAg-B51w60KvhjjgSPoXyJ08j
sass語法 在 sass quick start | best practice | sass 快速开始/环境/语法/实践 的美食出口停車場
Sass 项目实践视频文字稿: https://mbox.dev/dev/quick-start/ sass /the demostration project repo:https://github.com/gitdigg/ sass -demo⭐️TABLE ... ... <看更多>