限制 SCSS 巢狀結構只能一層
雖然 SCSS 的巢狀結構沒有限制層數,但好的 BEM 配合 SCSS 最好只要一層就好,可以透過 Stylelint 加以限制。
雖然 SCSS 的巢狀結構沒有限制層數,但好的 BEM 配合 SCSS 最好只要一層就好,可以透過 Stylelint 加以限制。
若由多人共同開發 SCSS,不同的樣式排序將造成困擾,可透過 Stylelint 將樣式統一排序。
BEM 命名規則在 SCSS 開發為必備,透過 Stylelint 也可加以檢查,且支援 SCSS 的 &。
Stylelint 可檢查 SCSS,除了安裝 Stylelint 外,還要安裝 Stylelint-scss 與 Stylelint-config-standard-scss。
Stylelint 可檢查 SCSS,除了安裝 Stylelint 外,還要安裝其他 Plugin 與修改設定檔,才能完成 檢查 BEM、查狀結構 與 樣式排序…等需求。
Sass 為 CSS 的前處理器,可以想成是 CSS 的 Template Engine,最後會編譯成標準 CSS。Sass 提供了 3 大基礎功能:巢狀結構、變數 與 引用檔案,彌補了 CSS 之不足。
HTML 的 <head> 會載入 CSS,也是各 Template 都會重複使用之處,可將其抽成 Partial 方便維護。
Hugo 內建支援 LibSass,其實也相當夠用,但 LibSass 已經停止支援,若想用最新的 Sass 語法,則必須另外安裝 Dart Sass,且 Hugo 已經原生支援 Dart Sass。