我们有项目,内置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;
}
}
}
}
}
}
}
答案 0 :(得分:0)
在SASS / SCSS中使用嵌套功能时要记住的良好原则:仅仅因为你可以,并不意味着你应该这样做。最好保持您的特异性尽可能低,这意味着只有在您需要时才能进行嵌套。
你有什么方法可以把它分开并将规则分开而不是嵌套?你的错误就会消失。
就SCSS性能而言,不要担心。这就是它作为预处理器的重点:它在点击浏览器之前做了很多工作。但是,如果你使用不好的做法并最终在浏览器中为用户膨胀你的CSS,你应该开始担心。但我真的不认为这是一个问题。