在不违反 linting 规则的情况下，优雅地将选择器中的元素定位为三层嵌套深度

Question

我正在重构一些 SCSS，并且在我的 SCSS 文件中使用 BEM 语法遇到了嵌套问题。

我的 linting 规则规定我不能使用超过三层的嵌套。

但是，有时我可能想在我的 SCSS 文件的修饰符选择器中定位一个元素。

这是我的方法：

.block {
    &__element {
        &--modifier {
            &::after {
                // Four levels deep :(
            }
        }
    }
}

这是我看到的唯一合乎逻辑的方式：

.block {
    &__element {
        &--modifier {
            // Three levels deep
        }

        &--modifier::after {
            // Three levels deep
        }
    }
}

我不喜欢这种方法，因为我不喜欢重复修饰类名。

有更好的解决方案吗？

Answer 1

linting 工具的目的是强制开发人员开发可维护的代码。做一些（可能更难编写和阅读）解决方法与这个目标完全相反。

您提供了一个完全有效的用例，其中 4 个级别是实现目标的最简洁方法。因此你应该

调整 linting 规则 (.scss-lint.yaml)

  NestingDepth:
    max_depth: 4

或（如果它不经常发生）禁用内联警告：

// scss-lint:disable NestingDepth

在不违反 linting 规则的情况下，优雅地将选择器中的元素定位为三层嵌套深度

Elegantly targeting an element within a selector three nesting levels deep, without breaking linting rules

nested

sass

bem

scss-lint