自动编译sass的工具有很多，比如说gulp，grunt，fis等等，如果只是做sass的编译的话，没有必要安装配置各种环境，只需要简单插件或者小工具即可实现，sass中文网提供的Ruby方法相对比较复杂，还各种配置，很容易出错。本文主要介绍了两个方法：1.使用vscode扩展；2.使用koala编译。

Vscode中自动编译sass和配置

只需要在vscode编辑器中安装扩展插件就可以很轻松实现。

这里推荐的插件有两个：Sass和Easy Sass：

1. Sass：系统默认的提示只会对.scss文件进行代码高亮显示，同时也能唤起系统的css代码提示，所以如果使用sass的后缀是.scss这种的，系统自带的会进行提示，不需要安装，如果是用.sass这种的话，就需要安装了，否则没有任何提示和高亮哦。

2. Easy Sass：当ctrl+s保存的时候，自动编译SASS / SCSS的扩展插件。默认情况下，ctrl+s保存的时候，会在sass文件相同的目录下会生成两个css文件，一个是压缩过的（XXX.min.css），一个是没有压缩的（xxx.css）。

Sass这里不再过多介绍，重点说下Easy Sass，Easy Sass提供四个设置选项，需要修改的话，在设置面板中进行对应的修改即可：

easysass.compileAfterSave：保存后启用或禁用自动编译
easysass.formats：指定导出文件的扩展名和格式。
easysass.targetDir：为生成的文件定义目标目录。
easysass.excludeRegex：使用正则表达式从编译中排除文件

很多时候，如果sass文件和css文件都放在一起，不方便我们管理，往往很多人都会把sass和css文件分开不同的文件夹，如图：

例如：修改为把编译之后的css单独放在一个css文件夹中。Ctrl+, 打开设置面板，左侧找到扩展，点击安装好的EasySass configuration，找到targetDir，在下方输入 ./css/  即可：

当然，也可以直接在settings.json（这个文件在设置中任意一插件里面都可以找到）中手动添加一个参数也是可以的。

"easysass.targetDir": "./css/"

注意：

这里需要注意下，我们修改完配置之后，实际是用的时候，sass文件夹和css文件夹还是需要手动创建，不然不会生效的哦！

所有配置扩展详细说明：

Ø easysass.compileAfterSave 保存 scss 或 sass 文件后自动进行编译。默认为 true。一般设为 true，可提高工作效率，如果项目中有不直接编译的文件，例如 variable.scss、theme.scss、mixin.scss 等，建议设为 false，避免这类文件编辑保存后被编译为无效 css 需要手动删除的尴尬。

Ø easysass.excludeRegex 提供一个文件名的正则表达式，匹配的文件会被排除，不会被编译成 css。默认为空，即该功能关闭。个人建议将一些不直接编译的文件以下划线开头命名，例如：mixin.scss，然后设置：`"easysass.excludeRegex": "^+"`，即可排除所有以下划线开头的 scss/sass 文件。

Ø easysass.formats 定义输出 css 文件的排版风格和文件名，是一个数组，可以同时编译输出多个不同风格、文件名的 css 文件。每个数组对象中有两个参数：

easysass.formats[i].format 用以编译生成对应风格的 css，参数值如下：

nested：嵌套缩进的 css 代码。

expanded：没有缩进的、扩展的css代码。

compact：简洁格式的 css 代码。

compressed：压缩后的 css 代码。

Ø easysass.formats[i].extension 顾名思义就是设置编译输出的文件拓展名了，此处可以自定义文件名，输出的 css 文件名会按照“当前 Sass 文件名（不含拓展名）+此处自定义文件名”的格式来生成。例如：设置 "easysass.formats[i].extension": ".min.css"，假设当前的 Sass 文件名为style.scss，则编译输出的 css 文件名为 style.min.css。

Ø easysass.targetDir 我们在生产环境中很多情况下 scss/sass 文件和 css 文件是不在同一个目录下的，而 Easy Sass 默认输出的 css 是和当前 Sass 文件处于相同目录的，为此我们需要通过该参数来配置输出路径。参数值可以是绝对路径或相对路径。如果是相对路径，则以 VSCode 当前打开的项目的根目录为基准。

考拉编译SASS

考拉是一个不依赖于任何开发工具的独立的编译工具，，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。使用方式也非常方便简单。

考拉官网：http://koala-app.com/index-zh.html

也可以从github上进行下载：https://github.com/oklai/koala/releases

使用方法：

1. 正常下载安装考拉编译软件；

2. 直接把sass文件夹或者sass/scss文件拖到软件中，会自动执行编译（如果是编译文件夹，那么会自动新建css文件夹；如果拖拽的是sass/cscss文件，那么生成的css文件会和sass/scss文件在同一目录中）；

3. 如果没有自动编译的话，可以勾选右侧“auto complete”，同时手动点击“comple”进行手动编译（右侧有各种不通的选项，可以选择带注释的，不带注释的，压缩的非压缩的等等）；