css - SCSS : Improve performance

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。但我真的不认为这是一个问题。