使用 VSCode 编辑器来编译 Sass，自动生成对应的css

1.首先在vscode商店中搜索easysass，然后安装

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

 // easy sass插件
    "easysass.compileAfterSave": true,

    "easysass.excludeRegex": "",

    "easysass.formats": [
        {
        "format": "expanded",
        "extension": ".css"
        },
    ],

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

“easysass.targetDir”: “”，这个属性可以设置对应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。