如何将Sass编译成CSS

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

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
 

效果如下图所示：

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

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

sass --watch app/sass