SCSS:提高绩效

时间:2015-07-16 13:45:22

标签: css css3 extjs sass css-selectors

我们有项目,内置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;
              }
            }
          }
        }
      }
    }
  }

1 个答案:

答案 0 :(得分:0)

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

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

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