使用 VSCode 编辑器来编译 Sass

VSCode 是继 Sublime Text3、Atom 后另一个让我爱不释手的编辑器，其颜值和插件生态圈与 Atom 不相上下，但比后者用起来更加丝滑流畅（Atom 需要4G+内存和SSD 才能逆天），所以自然成了我目前首选的编辑器。

---

前端项目自然少不了和 Sass 打交道，VSCode 提供了丰富的相关插件来帮助我们处理 Sass 相关任务。我用的是 Easy Sass 这款插件，目前最新版本是 0.0.6。

由于 Sass 的编译依赖 Ruby 环境，因此我们在开始之前首先得安装 Ruby，别担心，装 Ruby 只是为了提供运行环境，不懂 Ruby 没任何关系。官网下载传送门

安装 Ruby 时一定要勾选 Add Ruby executables to your PATH，用来将 Ruby 添加到系统变量，这样后续可以省却很多不必要的麻烦。装好后在命令行输入 gem sass 来安装 Sass，安装完成后启动 VSCode，在拓展商店里搜索“easy sass”，并安装，安装成功后重启 VSCode。

 

接下来进行配置。在 VSCode 菜单栏依次点击“文件 首选项 设置”，打开 settings.json 全局配置文件。搜索“easysass”，然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中，再根据实际情况修改配置项。

 

一般生产环境中用到其中两个设置项（上图红框处中的代码）：

/** Easy Sass 插件 **/
    "easysass.formats": [
        {
            "format": "compressed",  // 压缩
            "extension": ".css"
        }
    ],
    "easysass.targetDir": "./"  // 自定义css输出文件路径

其中 easysass.formats 是设置编译输出的 css 风格的，可以同时编译输出多个不同风格的 CSS 文件，此处我只设置了一个 easysass.formats 项目，所以编译时只生成一个 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”。

我们的生产环境中，在很多情况下 Sass 文件和 CSS 文件是不在同一个目录下的，而Easy Sass 默认输出的 CSS 是和当前 Sass 文件处于相同目录的，为此我们需要配置输出路径。

easysass.targetDir 提供 CSS 输出路径的设置，值可以是绝对路径或相对路径。例如：设置 easysass.targetDir 为 "./css/"，此时保存修改完毕的 Sass 文件，VSCode 会自动编译并在当前 Sass 文件的上级文件夹 css 目录下输出生成 CSS 文件（见下图）。

​​​​​​​ 

本文所述的只是采用 VSCode 编辑器编译生成 CSS 的一种方式，可能比较原始，实际生产环境中大多采用自动化构建方案，比如 grunt、gulp、fis 等。

作者： WingMeng 
链接：http://www.imooc.com/article/19624
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！