限制 SCSS 巢狀結構只能一層 | 次世代 Hugo

雖然 SCSS 的巢狀結構沒有限制層數，但好的 BEM 配合 SCSS 最好只要一層就好，可以透過 Stylelint 加以限制。

Version

Stylelint 16.23.1

Stylelint

.stylelintrc

{
  "extends": "stylelint-config-standard-scss",
  "plugins": ["stylelint-scss"],
  "rules": {
    "max-nesting-depth": [
      1,
      {}
    ]
  }
}

• Stylelint 設定檔

Line 4

"rules": {
  "max-nesting-depth": [
    1,
    {}
  ]
}

• max-nesting-depth：
• 1：設定巢狀結構最多只能 1 層

Conclusion

• SCSS 巢狀結構太多層並不好維護，可透過 Stylelint 加以限制