Sass 是一种 CSS 预处理器，它能够让开发者使用类似编程语言的方式来编写 CSS，具有更强大的复用性和灵活性。在使用 Sass 的时候，有一些必要的知识点需要掌握，本文将介绍 Sass 使用前你需要知道的十件事。
1. Sass 是什么
Sass 是一种 CSS 预处理器，它扩展了 CSS 语言，使其能够用类似编程语言的方式来编译 CSS。Sass 可以让你写出更加简洁、优雅的 CSS 代码，同时提高了 CSS 的可重用性和可维护性。
2. 安装 Sass
要使用 Sass，首先需要安装 Sass。安装 Sass 的方法很简单，可以通过以下命令进行安装：
npm install -g sass
也可以在其官网下载 Sass，包括 Windows、Mac 和 Linux 版本。
3. Sass 语法
Sass 有两种语法：缩进式和 SCSS。缩进式语法使用缩进来表示层级关系，而 SCSS 使用花括号和分号来表示层级关系。使用哪一种语法，取决于个人喜好和项目需求。
下面是一个缩进式语法的示例：
$primary-color: #000; body background-color: $primary-color; a color: $primary-color;
下面是一个 SCSS 的示例：
-- -------------------- ---- -------
--------------- -----
---- -
----------------- ---------------
- -
------ ---------------
-
-4. Sass 变量
Sass 支持变量，可以使用 $ 符号来定义一个变量。定义好了变量之后，在其他地方引用变量，就可以使用定义时的值。这样可以避免在多个地方使用相同的颜色值、字体等时，需要多次编辑的情况。
下面是一个变量的示例：
$primary-color: #000;
body {
background-color: $primary-color;
}5. Sass 嵌套
Sass 支持 CSS 的层级嵌套，这意味着在样式规则中可以使用父类及其子类的选择器，而不用重复地写出它们的关系。这使得样式规则更清晰、更易于维护。
下面是一个嵌套的示例：
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-
-- -
-------- -------------
- -
---------------- -----
-
-
-6. Sass 混合器
Sass 支持混合器，可以用来声明一个可复用的样式片段。混合器可以带有参数，这样可以在调用混合器时传入不同的参数值。
下面是一个混合器的示例：
-- -------------------- ---- ------- ------ ---------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - ---- - -------- ------------------- -
7. Sass 继承
Sass 支持继承，可以用来将一个选择器中的样式规则继承到另一个选择器中。这可以避免样式代码的重复，在维护代码时也很方便。
下面是一个继承的示例：
-- -------------------- ---- ------- -- -------- -- ------ - -------- ----- ------- --- ----- ----- - -- ------------- -- ---- - ------- ------- ----------------- ----- -
8. Sass 运算
Sass 支持运算，可以进行加减乘除和取余等运算。这使得在样式代码中可以进行简单的数字计算，避免了对应用程序的依赖。
下面是一个运算的示例：
.box {
width: 100% / 3;
height: 100px;
}9. Sass 函数
Sass 内置了许多函数，可以用来进行颜色、数值、字符串等操作。这些函数使得在样式代码中可以进行更复杂的计算和操作。
下面是一个函数的示例：
.box {
background-color: lighten(#000, 20%);
}10. Sass 导入
Sass 支持导入，可以将多个 Sass 文件合并为一个文件，从而简化样式代码的管理。在导入文件时，可以使用 _ 前缀来表示该文件不会单独编译，而是会被其他文件导入使用。
下面是一个导入的示例：
-- -------------------- ---- ------- -- ---------- -- --------------- ----- -- --------- -- ------- ------- ---- - ----------------- --------------- -
总结
Sass 是一种非常强大的 CSS 预处理器，通过使用 Sass，可以使样式代码更加清晰、易于维护，同时可以提高开发效率。在使用 Sass 之前，必须要掌握其基本语法、变量、嵌套、混合器、继承等知识点，并且需要掌握如何安装和使用 Sass 相关工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64719663968c7c53b0f75294