什么是 CSS 预处理器？
CSS 预处理器是一种编译型语言，它可以扩展 CSS 语言，让开发者能够使用变量、嵌套、混合等功能。通过使用 CSS 预处理器，开发者可以更加高效地编写 CSS 代码，减少重复代码的使用，提高样式表的可维护性和可重用性，从而提高开发效率和代码质量。
目前较为流行的 CSS 预处理器有 Sass、Less 和 Stylus，其中 Sass 是最早推出的预处理器，也是目前应用最广泛的预处理器之一。
Sass 的基本语法
变量
使用 $ 定义变量，可以在后面的样式中引用。如下：
$primary-color: #4285f4;
a {
color: $primary-color;
}嵌套规则
在 Sass 中，可以使用嵌套规则，使代码更加清晰易读。如下：
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
------- - -----
- -
---------------- -----
------ -----
------- -
---------------- ----------
-
-
-
-
-混合指令
使用 @mixin 定义一个样式块，使用 @include 引入这个样式块。如下：
-- -------------------- ---- ------- ------ ---------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - ---- - ------ ------ ------- ------ ----------- ----- -------- ------------------- -
继承指令
使用 @extend 可以让一个选择器继承另一个选择器的样式。如下：
-- -------------------- ---- ------- ---- - -------- ----- ----------- -------- ------- ----- ------ ----- - ------------ - ------- ----- ----------- ----- -
条件语句
使用 @if、@else if 和 @else 来实现条件语句。如下：
-- -------------------- ---- -------
------ ------------------ -
--- ------ -- ---- -
------ -----
- ----- -- ------ -- --- -
------ ----
- ----- -
------ ------
-
-
- -
-------- -----------------
-Sass 的高级用法
颜色函数
使用颜色函数可以更加方便地操作颜色。如下：
.btn-primary {
background: lighten($primary-color, 10%);
}循环语句
使用 @for 循环语句可以快捷生成大量样式，使代码更简洁、易读。如下：
@for $i from 1 through 5 {
.box-#{$i} {
width: 50px * $i;
height: 50px * $i;
}
}自定义函数
使用 @function 可以自定义函数，方便对样式进行计算和处理。如下：
-- -------------------- ---- ------- --------- -------------------------- ------ - ------- ------- - ------ - ---- - ------ ------ ------- ------ ----------- ----- -------------- ---------------------- ----- -
总结
Sass 是一种非常强大的 CSS 预处理器，提供了多种语法机制，有助于提高代码可读性和减少冗余代码。掌握 Sass 的基本语法和高级用法，可以有效地提高前端开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2b75cf6b2d6eab3dfaf21