Vscode live sass compiler插件的自定义方法

window用户，为了安装sass简直煞费苦心，去网上搜索安装失败例子，按照高赞博客的步骤，奈何还是重装了无数次。并不是说照做安装失败，而是安装成功，但是一用起来就是Node-Sass: could not find a binding for your current environment. 蛋疼。。。后来又找了很多攻略，重装重新下载还是这样。

今日撸代码无意中发现vscode里有sass的插件，对比了一下，选了个顺眼的live sass compiler插件。用起真是太便捷了，从此后台下载sass什么的(手动拜拜)

Vscode live sass compiler是vscode编辑器的一个sass自动解析插件。
它可以自动将sass解析成css，并可以自动添加css兼容性前缀，-webkit-，-moz-，-ms，-o-等。

并且可以自定义css文件解析后的代码样式，是展开的（expend），紧凑的（compact），嵌套的（nested）还是压缩（compressed）的，还是其它的都可以自定义。 可以自定义css是否对样式添加兼容性前缀，兼容到什么级别，是否针对IE添加兼容性代码等

插件的使用方法：

1、安装之后，新建scss文件，先新建一个scss文件！先新建一个scss文件！

2、在下面的蓝色状态栏中点击watch sass。或者用ctrl+shift+P，打开状态栏点开live sass：watch sass。两种方法打开都可以。当然，关闭的时候也是。

3、只要是状态栏中插件状态是watching状态，后台即可自动帮你解析sass为css文件。

但是默认下，不会自动添加兼容性前缀，而且，解析出css文件的同时还会解析出map文件，如果不想要map文件，而且想自动添加兼容性前缀，那么就需要自定义了。

自定义代码：

在 VSCode中打开设置 -》扩展 -》找到 live sass compiler -》Live Sass Compile>settings:Formats -》在 settings.json 中编辑

下面的自定义代码的作用是将css的代码样式设置成展开（expanded）的形式。易于阅读。css的名称是原名称+.css的形式。在sass文件同一个目录下生成。 不生成map文件。 添加兼容性代码。

{
     "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": null
        }
    ],
    "liveSassCompile.settings.excludeList": [
       "**/node_modules/**",
       ".vscode/**"
    ],
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 3 versions"
    ]
}

修改完后保存settings.json文件。
回到正常工作下，在scss文件中一边编辑，一边就会输出到当前目录下css文件中。