自动编译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 当前打开的项目的根目录为基准。