章節連結
Sass/CSS 的設計模式，對於使用者來說，你可以把它想做是一種歸納管理 CSS 的思維。隨著專案的開發架構越發龐大，修改一個小小樣式變成一個大工程，因為你必須要在茫茫程式海中找到對應或是關聯的 CSS 位置。容易擴展和模組化的 CSS 架構是大型專案管理的必備思維之一。
課程對應章節
Course 32 ～ Course 43 (全部一共有 72 Courses)
請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/ueo7bm2
內容
Smacss
- 用 base rule 打好根基樣式(全站設定)，然後再行特別修改。
- 由 Layout 製作表頭，放置全站會用到的布局(像是導覽列、頁腳……等等)，剩餘的就是中間的內容抽換。有點像是 Handlebars 中的 views/layout 中的主要樣板(main.handlebars)。
- 若你在網站內會有預期的版型配置樣式，那麼你可以加上前綴詞的方式(如：.l-list，代表 List 的共用 Layout)來提醒自己。
- 常用的樣式，減少語意的用法，改用抽象 + 字詞。
- 模組化你的 CSS：設定基底樣式 → 針對特定情況下一個部分修改的 CSS 疊加到舊有的樣式上 (例如：class=”btn btn-primary”)
- 增加子模組是一種擴充包的概念
- 撰寫CSS時不要去指定 HTML Tag，這樣方便做調整
範例
|
1 2 3 4 5 6 7 |
@import "variable" // 變數載入 @import "normalize" // 標準各瀏覽器設定 @import "base" // 客製化的全站設定 @import "mixin" // 個人常用的函式庫 @import "mobile" //載入行動裝置共用版型 /*以下以"分頁"為主題，管理不同區塊的CSS*/ |
