概述
CSS 预编译器（CSS preprocessor）是一种将基于 CSS 的语言转化成普通CSS的工具。这样做可以使得 CSS 更易于维护、开发，并且可以用更加高级的方式表达复杂的样式。Sass （Syntactically Awesome Stylesheets）是一个强大的 CSS 预编译器，它为开发者提供了一些更加现代化的语言功能，可以大大提高代码的可读性和可维护性。本文将介绍 Sass 的安装和使用方法。
安装
安装 Sass 可以使用 NPM 包管理工具。首先需要安装 Node.js，然后在终端中运行以下命令即可：
npm install -g sass
这条命令将在全局范围内安装 Sass。全局安装是为了可以在项目的任何位置使用 Sass 命令，并且可以直接使用 Sass 的 CLI 工具。
通过运行 sass --version 命令可以确认 Sass 是否安装成功。
使用 Sass
一旦正确安装了 Sass，那么就可以使用它来加速样式表的开发了。
语法
Sass 支持两种不同的语法：Sass 和 SCSS 语法。其中 Sass 语法采用缩进的方式来表达 CSS 规则，而 SCSS 语法则和 CSS 的语法十分相似，使用花括号和分号来表示规则和声明。在实践中，SCSS 语法更为常见。
编译 Sass
将 Sass 代码编译成 CSS 代码需要使用 CLI 工具。假设我们有一个名为 styles.sass 的 Sass 文件，可以使用以下命令来编译它：
$ sass styles.sass styles.css
这条命令将读取 styles.sass 文件的内容，并将编译后的 CSS 写入 styles.css 文件中。
编译 SCSS
和 Sass 语法一样，将 SCSS 代码编译成 CSS 代码也需要使用 Sass 的 CLI 工具。假设我们有一个名为 styles.scss 的 Sass 文件，可以使用以下命令来编译它：
$ sass styles.scss styles.css
这条命令将读取 styles.scss 文件的内容，并将编译后的 CSS 写入 styles.css 文件中。
监听 Sass
为了更加高效地开发，我们可以让 Sass 监听我们的 Sass 文件，并在文件变化时自动编译出相应的 CSS 代码。这可以通过以下命令来实现：
$ sass --watch styles.scss:styles.css
这条命令将开始一个 Sass 的监听器，在 styles.scss 文件发生变化时自动编译出 styles.css 文件。这样我们就可以实时地修改 Sass 代码，立刻看到相应的样式变化了。
结语
本文介绍了 Sass 的安装和使用方法，包括如何编译和监听 Sass 文件。Sass 的高效性和灵活性不仅适用于个人的小型项目，在大中型团队的项目中也得到广泛应用。希望本文能够帮助读者更好地掌握 Sass 的使用技巧。
示例代码
-- -------------------- ---- -------
-- ----
--------------- -----
----------------- -----
-- ------
---- -
----------------- ---------------
------ -----------------
-
-- -- -----
------ ---------------------- -
------------------- --------
---------------------- --------
-------------- --------
-
-- -- -----
------ -
-------- -------------------
-
-- ----
------ -
------- --- ----- ----
-
-------- -
------- -------
------------- -------
-
-- ----
----------- -----
--- -
--- ---------- -
----------------- -----
-
----- -
----------------- -----
-
-
-- --
---- -- ---- - -- - -
----------- -
------ ----- - ---
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64016