sass 套料深度

示例

嵌套是一项非常强大的功能，但应谨慎使用。它可以非常容易和快速地发生，您可以开始嵌套并继续进行嵌套，嵌套或嵌套中的所有子代。让我示范一下：

// SCSS
header {
  // [css-rules]

  .holder {
    // [css-rules]

    .dropdown-list {
      // [css-rules]

      ul {
        // [css-rules]

        li {
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

// 最后一条规则的CSS输出
header .holder .dropdown-list ul li {
  margin: 1rem 0 0 1rem;
}

问题

特异性

在li从上面的例子中有一个margin组。假设我们要稍后在媒体查询中覆盖它。

@media (max-width: 480) {

  // 不管用
  .dropdown-list ul li {
    margin: 0;
  }

  // 将工作
  header .holder .dropdown-list ul li {
    margin: 0;
  }
}

因此，由于嵌套太深，因此每当要覆盖某个值时，都必须再次嵌套深。更糟糕的是，这通常是规则!important要使用的地方。

@media (max-width: 480) {

  // BIG NO-NO，不要这样做
  .dropdown-list ul li {
    margin: 0 !important;
  }

为什么!important-rule是个坏主意

您应该以一种很好的方式编写SCSS，以至于这些变通方法甚至根本不需要。!important在这样一个较小的问题上使用，将使您陷入困境！

可重用性

这与特异性问题相当相似，但值得单独指出。如果您对按钮或什至是下拉菜单等样式进行设置，则可能需要在页面上的其他地方重用这些样式。

嵌套得太深，您的样式将只绑定到位于最外部父元素内的元素（位于SCSS顶部的元素）。这将导致您复制样式并将其再次粘贴到其他位置。可能在其他嵌套规则中。

您的样式表将变得越来越大，并且难以维护。

您应该嵌套多深？

大多数样式指南将最大深度设置为2。通常，这是一个很好的建议，因为在极少数情况下，您想嵌套得更深。大多数时候，2就足够了。