SASS 是一种 CSS 预处理器，它为 CSS 提供了更强大的功能和更灵活的语法。使用 SASS 可以更好地组织 CSS 代码，减少重复的代码，提高开发效率。本文将介绍如何编译 SASS，并完成 SASS 初级教学。
安装 SASS
要使用 SASS，首先需要安装 SASS。可以使用 npm 或者 yarn 进行安装：
npm install -g sass
或者
yarn global add sass
安装完成后，就可以在命令行中使用 SASS 了。
编译 SASS
SASS 的源代码是以 .scss 或者 .sass 文件的形式存在的。在浏览器中直接使用这些文件是不行的，需要将它们编译成普通的 CSS 文件。
使用 SASS 编译器可以将 .scss 或者 .sass 文件编译成 CSS 文件。SASS 编译器可以在命令行中使用，也可以在编辑器中使用。
命令行编译
在命令行中使用 SASS 编译器可以将 .scss 文件编译成 .css 文件。例如，将 main.scss 编译成 main.css：
sass main.scss main.css
这样就可以将 main.scss 编译成 main.css 文件了。
编辑器编译
很多编辑器都内置了 SASS 编译器。例如，VS Code 中可以安装 Live Sass Compiler 插件，就可以在编辑器中实时编译 SASS 文件。只需要在编译器中打开 .scss 文件，然后点击插件中的 Watch SASS 按钮即可。
SASS 初级教学
变量
SASS 中可以使用变量来存储颜色、字体、大小等属性。定义变量的方式是使用 $ 符号。例如：
$primary-color: #333;
这样就定义了一个名为 primary-color 的变量，它的值是 #333。
在使用变量时，只需要使用变量名即可。例如：
body {
background-color: $primary-color;
}这样就可以将 body 的背景色设置为 #333。
嵌套规则
SASS 中可以使用嵌套规则来组织 CSS 代码。例如：
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-
-- -
-------- -------------
------- - -----
-
- -
------ ---------------
---------------- -----
-
-这样就可以将 nav、ul、li、a 这些元素的样式组织在一起，使代码更加清晰。
Mixin
SASS 中可以使用 Mixin 来复用一段样式。Mixin 可以接受参数，使其更加灵活。例如：
-- -------------------- ---- ------- ------ ---------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - ---- - -------- -------------------- -
这样就可以将 .box 的圆角半径设置为 10px。
继承
SASS 中可以使用继承来复用样式。例如：
-- -------------------- ---- ------- ------- - -------- ------------- -------- ---- ----- ---------- ----- ----------- ------- ---------------- ----- ------ ----- ----------------- --------------- -------------- ---- - --------------- - ------- -------- - ----------------- - ------- -------- ----------------- ----- -
这样就可以将 .button-primary 和 .button-secondary 的样式继承自 %button。
总结
本文介绍了如何安装和编译 SASS，以及完成了 SASS 初级教学。SASS 可以为 CSS 提供更强大的功能和更灵活的语法，使用 SASS 可以更好地组织 CSS 代码，提高开发效率。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cde1a3add4f0e0ff707609