在前端开发过程中，CSS 是必不可少的一部分。但是 CSS 的书写方式相对繁琐，难以维护。为了解决这个问题，Sass（Syntactic Awesome StyleSheets）应运而生。它是一款预处理器，可以帮助我们更优雅地编写 CSS。但是在实际使用中，我们还需要注意 Sass 编译后源码的问题。
Sass 编译后源码
我们可以通过 Sass 编写比较简洁的代码，如下所示：
$primary-color: #333;
.navigation {
background-color: $primary-color;
.logo {
color: white;
}
}但是，Sass 在编译后会生成对应的 CSS 代码：
.navigation {
background-color: #333;
}
.navigation .logo {
color: white;
}这样的代码虽然可读性比原生 CSS 高，但是还存在一些问题。
嵌套导致层级过深
在 Sass 中，我们可以通过嵌套语法来表示 CSS 的层级关系。但是在编译后，每一层的嵌套都会增加一层选择器的层级。这样可能会导致 CSS 中选择器的层级过深，从而影响页面的性能。
-- -------------------- ---- -------
----------- -
----------------- ---------------
----- -
------ ------
--- -
------ -----
-
-
-编译后会生成如下的 CSS 代码：
-- -------------------- ---- ------- ----------- - ----------------- ----- - ----------- ----- - ------ ------ - ----------- ----- --- - ------ ----- -
可以看到，经过编译后的代码中选择器的层级较深，这可能会影响页面的性能。
重复样式代码
在 Sass 中，我们可以使用变量、混合器等功能来减少代码量。但是在编译后，这些功能会被编译成对应的 CSS 代码。如果在 Sass 中重复使用了样式代码，编译后的代码中也会存在重复的样式代码。
$primary-color: #333;
.button {
background-color: $primary-color;
}
.submit {
background-color: $primary-color;
}编译后会生成如下的 CSS 代码：
.button {
background-color: #333;
}
.submit {
background-color: #333;
}可以看到，编译后的代码中存在重复的样式代码。这样也可能会影响页面的性能。
解决方法
为了解决以上问题，我们可以通过以下方法来优化 Sass 编译后的代码：
减少嵌套
在 Sass 中，我们可以通过继承（@extend）等方法来减少嵌套。例如，上面的例子可以改写为：
-- -------------------- ---- ------- --------------- ----- ----- - ------ ------ - ----------- - ----------------- --------------- ------- ------ - ----------- ----- --- - ------ ----- -
编译后会生成如下的 CSS 代码：
-- -------------------- ---- ------- ------ ----------- - ------ ------ - ----------- - ----------------- --- - ----------- ----- --- - ------ ----- -
可以看到，通过继承等方法，可以减少代码中的嵌套层级。
尽量避免重复代码
在 Sass 中，我们可以通过继承或 mixin 等方法来避免重复使用样式代码。例如：
-- -------------------- ---- ------- --------------- ----- -------------- - ----------------- --------------- - ------- - ------- --------------- - ------- - ------- --------------- -
编译后会生成如下的 CSS 代码：
.button,
.submit {
background-color: #33;
}可以看到，通过使用样式代码的继承来避免重复代码。
总结
在实际使用 Sass 进行前端开发时，我们需要关注 Sass 编译后源码的问题。通过减少嵌套和尽量避免重复代码等方法，可以优化 Sass 编译后的代码，提高页面的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647675a7968c7c53b03307a4