Question

我们有项目，内置Extjs和scss。我们希望提高scss的性能。我们使用了grunt scss-lint，并得到了结果

NestingDepth: Nesting should be no greater than 3, but was 4

我们如何将嵌套减少到3级？有什么方法可以帮助我们提高scss的性能吗？

更新。请看下面的例子。

.x-grid-row,
  .x-grid-row-alt {
    color: $white-font-color !important;

    &.x-grid-row,
    &.x-grid-row-over {
      color: $white-font-color !important;

      .x-grid-cell {
        color: $white-font-color !important;

        &.clickable-grid-cell {
          color: $white-font-color !important;

          &:hover {
            color: $white-font-color !important;
          }

          .x-grid-cell-inner {
            color: $white-font-color !important;

            div {
              color: $white-font-color !important;
            }

            &:hover {
              color: $white-font-color !important;

              div {
                color: $white-font-color !important;
              }
            }
          }
        }
      }
    }
  }

Answer 1

在SASS / SCSS中使用嵌套功能时要记住的良好原则：仅仅因为你可以，并不意味着你应该这样做。最好保持您的特异性尽可能低，这意味着只有在您需要时才能进行嵌套。

你有什么方法可以把它分开并将规则分开而不是嵌套？你的错误就会消失。

就SCSS性能而言，不要担心。这就是它作为预处理器的重点：它在点击浏览器之前做了很多工作。但是，如果你使用不好的做法并最终在浏览器中为用户膨胀你的CSS，你应该开始担心。但我真的不认为这是一个问题。

SCSS：提高绩效

1 个答案: