作为一名前端开发者，我们通常要面对各种浏览器兼容、响应式设计、移动端适配等各种问题，其中样式代码的维护管理也是我们必须要面对的难题。 SASS 是一个以 CSS 为基础，添加了变量、嵌套、Mixin、函数等众多扩展功能的 CSS 预处理器，使得样式编写更加方便、简洁及容易维护。本文将分享如何使用 SASS 编写维护性高的样式代码。
1. 嵌套选择器
SASS 的嵌套选择器可以使得样式表的结构更加清晰，易于理解与维护。嵌套规则一般是以父元素为基础向下扩展，如下示例：
-- -------------------- ---- -------
-- ----- --
-----------
----------- -----
-
---------- -------
------ -----
-
---------- ---------
---------- -----
-
-- ---- --
-----------
----------- -----
-------
------ -----
-
---------
---------- -----
-
-可以看到，使用嵌套规则之后，选择器的结构更加清晰，可读性更好。
但是，过度的选择器嵌套会导致 CSS 选择器的权重过高，增加代码的复杂度，同时也给样式渲染带来不必要的性能问题，所以我们要把握好选择器嵌套的层级和选择器的权重。
2. 变量
在使用 SASS 的时候，我们可以通过定义变量来重复使用某些样式属性，以减少样式表的代码量，简化代码的维护。
$primary-color: #FF0000;
$font-size: 16px;
.button{
background: $primary-color;
font-size: $font-size;
color: #fff;
}这样，在后面使用 .button 类的时候，可以直接继承上述公共的属性。当我们需要改变颜色或者其他属性时，只需要去修改变量的值即可。
3. Mixin
Mixin 是 SASS 中定义可重用样式代码块的方式，可以将一些样式代码封装在一个 Mixin 中，需要时调用即可，大大简化了样式的编写。
-- -------------------- ---- ------- ------ ---------------- - -------------- -------- - ---- - -------- ------------- ------ ------ ------- ------ -
在上面的示例中，我们将 border-radius 样式封装在 rounded() Mixin 中，可以多次在代码中调用，同时提高了代码复用性。
4. 模块化开发
在使用 SASS 时，我们可以将页面拆分成多个模块，每个模块独立维护，互不影响。通过 @import 导入各个模块，可以使得每个开发者都能独立负责各自的样式开发，提高开发效率。
-- -------------------- ---- ------- -- --------------- -- -------- ------- ----- ----------- ----- - -- ------------- -- ------ ------ ----- -------- ----- ----------- ----- - -- --------------- -- -------- ------- ----- ----------- ----- - -- ------------- -- ------- --------- ------- ------- ------- ---------
在上面的示例中，我们将页面的各个模块拆分成单独的文件进行编写，再使用 @import 导入各个模块。
5. 书写规范
书写规范化的样式表，不仅易于阅读和维护，还可以减少错误的产生，提高开发效率。
以下是推荐的样式书写规范：
5.1 属性顺序
-- -------------------- ---- ------- --------- - -- ---- -- -------- ------ --------- --------- -------- --- -- ------- ------ ------ ------- ------ ------- ----- -------- ----- ------- --- ----- ----- -- ----- -- ------ ----- ---------- ----- ------------ ------ ----------- -- -- -- ----------------- ----- -- -- -- ------- -------- --------- ------- -
CSS 属性顺序的规则是，先显示属性，再盒模型属性，然后文字和字体属性，再到背景属性，最后加上其他属性，保证样式的可读性。
5.2 缩进与空格
对于选择器的语句块，我们要用两个空格进行缩进，为了提高可读性，我们可以在 selector 与 { 之间加一个空格，在 : 和值之间加一个空格，以区别于属性值中的空格。
-- -------------------- ---- ------- -- -- -- ------- - -------- ------------- ------- ----- -------- --- ----- ------ ----- ----------------- ----- - -- -- -- ---------------------------------------------------- ---------------------------------------
5.3 注释
注释在样式表中非常重要，可以方便地理解和维护样式表。注释的规则是，在注释开始的上方留下一个空行，在注释文字之间留一个空格。
-- -------------------- ---- ------- -- ------ -- -------- ------- ----- ----------- ----- - -- ---- ------- -- ------ ------ ----- -------- ----- ----------- ----- - -- ------ -- -------- ------- ----- ----------- ----- -
6. 总结
通过上述的介绍，我们可以看到，SASS 提供了一系列的扩展功能，可以使得样式代码更加易于维护，同时书写规范化的代码也可以提高开发效率。但是，我们要注意选择器嵌套的层级和选择器的权重，保持代码的简洁性，以及遵循书写规范，这样才能编写出更优雅的样式代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458a49a968c7c53b0afacba