(9) SCSS練功坊-7+1資料夾規劃

發表於 2022-06-20 更新於 2024-06-08 分類於 scss

使用7+1資料夾規劃scss檔案

7 + 1 資料夾規劃

當我們有許多SCSS檔案要規劃時，可以使用7+1歸納法，也就是7個資料夾搭配 1個 all.scss檔案

放 variables、mixin、funtion等不會真正產出 css 的 scss 檔案

放 base.scss 、 reset.scss、Typography等全域設定的scss

放全站都會用到的元件，如 button 、 label、nav等等

放全站共用的layout區塊，如 grid 、header、footer等等

.header {} // header 樣式
.footer {} // footer 樣式
.l-list {} // 使用 l- 前贅詞代表是 layout 用的樣式
.l-grid {}

放每頁不同的scss

如果你的網站有主題樣式，可以放這裡

放外部資源的scss檔，如bootstrap.scss