如何将Sass编译成CSS

本节我们来学习 Sass 的编译，我们写好的 Sass 代码，浏览器是不能识别的，Sass 只不过是作为一个预处理工具，只有将 Sass 代码编译成 CSS 代码后，才能够使用。那么 Sass 要如何编译成 CSS 代码呢，这就是我们本节需要讲到的内容。

Sass 的编译方法有很多，例如：

• 命令行编译模式：比较简单，可以直接在终端中输入 Sass 指令来编译，本节我们主要讲命令行编译模式的使用。
• GUI工具编译：有的比较多的看一工具有 Koala、CodeKit、Scout、Compass.app 等，这些工具都需要安装。
• 自动化编译：可以使用 Grunt 或者 Gulp 来配置 Sass 自动化编译。

命令编译

命令编译就是在终端中输入 sass 命令来编译 Sass 代码，这种编译方式使用起来很简单。

示例：

假设现在有一个Sass文件，文件名为 style.scss （Sass 文件的扩展名名 .scss），我们需要将这个文件中的代码编译成 CSS 代码，可以执行如下命令：

sass style.scss style.css

命令执行成功后，会自动创建一个 style.css 文件。但是这样有一个问题，就是每次更改了 style.scss 文件中的内容，都需要执行一次编译命令，就会很麻烦。

如果要解决上述问题，可以使用监听命令 --watch ，例如：

sass --watch style.scss:style.css

效果如下图所示：
[图片上传失败…(image-c1ec04-1610949292960)]

这样一旦我们修改了 style.scss 文件，只要重新保存，就会将修改内容自动编译到 style.css 文件中。

如果项目中有很多的 sass 文件，可以监听整个目录：

sass --watch app/sass:public/styles