sass - 使用 sass 时是否应该始终将选择器嵌套在其他选择器中？

Question

我的问题是关于 sass 或 scss 中的嵌套。从可读性的角度来看，我们可以将选择器嵌套在 sass 中的另一个选择器中，这是一件好事，但这是我们必须做的事情吗？我有点困惑，因为当我运行 scss-lint 时，我遇到了一些嵌套深度错误。我红色了几篇文章，现在我知道我们应该比将 3 个以上的规则嵌套在另一个规则中更深入。

所以我有两个问题:

1. 如果我像这样在 sass 中编写规则(不嵌套)，会有什么问题吗:

   .我的类(class) ...

不要这样写:

header
    nav
        .myclass

能解释一下为什么sass中需要嵌套，嵌套有什么好处吗？我知道这对于覆盖规则很有好处，但是如果我不需要嵌套那么深呢？我将不胜感激任何答案，甚至是一些更详细地解释我的问题的文章的链接。

Answer 1

如果没有充分的理由，您实际上应该避免在 Sass 中嵌套选择器。请参阅Avoid Nested Selectors for more Modular CSS和 Beware of Selector Nesting in Sass为什么你应该对嵌套更有选择性。

关于格式设置，您所做的在功能上等同于嵌套，但当这不是您的意图时，您确实不应该格式化换行符和缩进来模拟嵌套。

header
  nav
    .myclass {...}

和

header {
  nav {
    .myclass {...}
  }
}

两者都产生:

header nav .myclass {...}

因此，即使 scss-lint 可能会因您的格式设置而出错，但它可能无论如何都不是您想要做的事情。如果您根本不关心嵌套或选择器深度，只需 disable或override短绒。