我正在重构一些SCSS,我在SCSS文件中遇到了使用BEM语法的嵌套问题。
我的linting规则规定我不能使用三层以上的嵌套。
但是,有时我可能想要在我的SCSS文件中的修饰符选择器中定位元素。
这是我的方法:
.block {
&__element {
&--modifier {
&::after {
// Four levels deep :(
}
}
}
}
这是我看到的唯一合乎逻辑的方式:
.block {
&__element {
&--modifier {
// Three levels deep
}
&--modifier::after {
// Three levels deep
}
}
}
我不喜欢这种方法,因为我不喜欢重复修饰符类名。
对此有更好的解决方案吗?
答案 0 :(得分:2)
linting工具的目的是迫使开发人员轻柔地开发可维护的代码。做一些(可能更难写和读)的解决方法与此目标完全相反。
您提供了一个完全有效的用例,其中4个级别是实现目标的最简洁方法。因此你应该
调整linting规则(.scss-lint.yaml)
NestingDepth:
max_depth: 4
或(如果它经常不发生)禁用内联警告:
// scss-lint:disable NestingDepth