vs code 使用scss/sass

sass的编译依赖 Ruby 环境

1、安装Ruby 官网下载传送门   注意：安装Ruby时一定要勾选 Add Ruby executables to your PATH，用来将Ruby添加到系统变量，后续可以省却很多不必要的麻烦。

2、装好Ruby后再命令行输入 gem sass 来安装 Sass。

3、装好Sass后，启动 vs code，在拓展商店里搜索“easy sass”，并安装，安装成功后点重新加载。

4、接下来进行配置： 在 vs code 菜单栏依次点击“文件 首选项 设置”，打开 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 
链接：https://www.imooc.com/article/19624
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作