什么是 Sass？
Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它扩展了 CSS 语言，增加了变量、嵌套规则、Mixin、函数等功能，使得 CSS 更加强大，更加易于维护和扩展。
Sass 的优势
- 变量：定义变量可以减少代码中的重复，提高代码的可维护性；
- 嵌套规则：可以更加清晰地表达 HTML 结构和 CSS 样式之间的关系；
- Mixin：可以把一些常用的样式抽象成一个 Mixin，方便重复使用；
- 函数：可以进行一些复杂的计算，生成不同的样式。
Sass 基本语法
变量
定义变量使用 $ 符号，例如：
$primary-color: #007bff;
使用变量：
a {
color: $primary-color;
}嵌套规则
使用嵌套规则可以更加清晰地表达 HTML 结构和 CSS 样式之间的关系，例如：
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-
-- -
-------- -------------
-
- -
------ ---------------
-
-Mixin
Mixin 可以把一些常用的样式抽象成一个 Mixin，方便重复使用，例如：
-- -------------------- ---- ------- ------ ---------------------- - ------------------- -------- ---------------- -------- ----------- -------- - ---- - -------- ------------ - ---- ------- -- -- ------ -
函数
使用函数可以进行一些复杂的计算，生成不同的样式，例如：
@function em($px, $base: 16px) {
@return ($px / $base) * 1em;
}
h1 {
font-size: em(24px);
}Sass 命名规则
Sass 的命名规则和 CSS 的命名规则类似，但是有一些特殊的规则：
- 变量名使用小写字母和短横线分隔符，例如
$primary-color； - Mixin 名称使用小写字母和下划线分隔符，例如
box_shadow； - 函数名称使用小写字母和下划线分隔符，例如
em。
总结
Sass 是一种强大的 CSS 预处理器，它扩展了 CSS 语言，增加了变量、嵌套规则、Mixin、函数等功能，使得 CSS 更加强大、易于维护和扩展。在使用 Sass 的时候，我们需要掌握变量、嵌套规则、Mixin、函数等基本语法，同时需要遵循命名规则，这样可以让我们的代码更加清晰、易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c5d4beadd4f0e0ff05cef8