这一节，我们将学习Sass的编译。我们编写的Sass代码无法被浏览器识别。Sass只是作为一个预处理工具，只是将Sass代码编译成CSS代码。之后，就可以使用了。那么Sass是如何编译成CSS代码的，这就是我们这一节要讲的内容。Sass的编译方式有很多种，例如：命令行编译方式：比较简单，直接在终端输入Sass命令即可编译。本节主要讲一下命令行编译方式的使用。GUI工具编译：一些工具包括Koala、CodeKit、Scout、Compass.app等，都需要安装。自动编译：Sass可以使用Grunt或Gulp自动编译。命令编译命令编译就是在终端输入sass命令编译Sass代码。这种编译方法使用起来非常简单。示例：假设有一个名为style.scss的Sass文件（Sass文件的扩展名为.scss），我们需要将这个文件中的代码编译成CSS代码，可以执行如下命令：sassstyle.scssstyle。css命令执行成功后，会自动创建一个style.css文件。但是这样做有个问题，就是每次更改style.scss文件中的内容，都需要执行一次编译命令，会很麻烦。如果想解决以上问题，可以使用监控命令--watch，例如：sass--watchstyle.scss:style.css效果如下图：【图片上传失败...（image-c1ec04-1610949292960)]一旦我们修改了style.scss文件，只要我们再次保存，修改的内容就会自动编译到style.css文件中。如果项目中有很多sass文件，可以监控整个目录：sass--watchapp/sass:public/stylesheetsSass四种输出格式在编译Sass代码的时候，我们可以指定Sass的编译输出格式，需要--style命令，该规范后面可以跟以下四种Sass输出格式：nested：嵌套输出格式，默认格式。expanded：扩展输出模式。compact：紧凑输出模式。compressed：压缩输出模式。示例：以style.scss文件为例，内容如下：.xkd{font-size:14px;颜色：#ccc；.box{宽度：100px；高度：100px；边框：1px实心#000；边框半径：5px；}}类型一：使用nested编译输出格式，可以执行如下命令：sassstyle.scss:style.css--stylenestedcompiledCSScode:.xkd{font-size:14px;颜色：#ccc；}.xkd.box{宽度：100px；高度：100px；边框：1px实心#000；边界半径：5px；}第二种：使用expanded编译排版格式输出，可以执行如下命令：sassstyle.scss:style.css--styleexpandedCompiledCSScode:.xkd{font-size:14px;颜色：#ccc;}.xkd.box{宽度：100px;高度：100px；边框：1px实心#000；border-radius:5px;}第三种方法：使用compact编译排版格式输出，可以执行如下命令：sassstyle.scss:style.css--stylecompactcompiledCSScode:.xkd{font-size:14px;颜色：#ccc；}.xkd.box{宽度：100px；高度：100px；边框：1px实心#000；边界半径：5px；}第四种方法：使用compressed编译排版格式输出，可以执行如下命令：sassstyle.scss:style.css--stylecompressedCSScodecompiled:.xkd{font-size:14px;color:#ccc}.xkd.box{width:100px;height:100px;border:1pxsolid#000;border-radius:5px}在四种输出格式中，我一般选择使用第二种输出格式，也就是展开后的格式类似于我们手写的CSS样式。选择器、属性等各占一行，属性根据选择器缩进，而选择器不做任何缩进。
