如何禁用Sass拼接选择器并对项目进行Lint检查？

我在项目中碰到了Sass父选择器添加后缀特性带来的麻烦——这个特性很容易导致样式缺失后难以排查，所以打算通过Lint检查来规避这类问题。

问题根源 #

Sass的父选择器&支持添加后缀生成嵌套样式，比如：

.card {
  &-header {
    padding: 1rem;
  }
}

编译后会得到：

.card-header {
  padding: 1rem;
}

但如果使用时出现拼写错误、嵌套逻辑混乱，很容易生成无效或不符合预期的选择器，等到样式不生效时很难快速定位问题。

Lint检查实现思路 #

• 用stylelint或者sass-lint这类工具配置针对性规则：
  • 对于stylelint，可以启用selector-no-unmatched-pseudo-class规则，或者自定义规则限制父选择器后缀的命名规范，比如只允许使用预设的后缀列表
  • 强制要求父选择器后缀必须遵循项目的命名约定，避免随意添加无意义的后缀
• 把Lint检查集成到项目的提交流程（比如Git Hooks）或CI流水线里，确保代码提交前就拦截可能引发样式问题的写法

内容的提问来源于stack exchange，提问作者Aleksandar Djindjic