live sass compiler-vscode插件将scss编译为css
live sass compiler是VSCode扩展，可以实时地将SASS / SCSS文件编译/转换为CSS文件。
- 可以自动添加css兼容性前缀，-webkit-，-moz-，-ms，-o-等。
- 可以自定义css文件解析后的代码样式（expanded 展开，compact，compressed 压缩，nested）。
- 可自定义编译/转换后的文件扩展名（.css或.min.css）。
使用方法
1.在vscode插件里搜索live sass安装。
2.安装后，新建scss文件，在vscode底部状态栏中点击watch sass，此时状态为 Watching ，即可自动解析sass为css文件。
自定义设置
在使用live sass compiler插件时，并不是所有的默认设置都如我们所愿，那么，我们来看一下如何自定义设置。
1.编译/转换后的文件格式、扩展名、保存位置
-
文件格式
格式可以是expanded，compact，compressed或nested。默认值为 expanded。 -
扩展名
扩展名可以是.css或.min.css。默认值为.css。 -
保存位置
默认的转换后的css文件保存在scss文件的同级目录下，但实际，我们通常需要把所有scss文件保存在scss文件夹，而css文件希望保存在css的文件夹，如图所示：
我们在配置中如下设置：
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css/"
}
]
savePath即为导出后的文件保存位置。
2.去掉编译时出现的css.map文件
在每个文件编译后，默认设置下，会同时出现一个map格式的文件，有时并不需要该文件，那么我们如何去掉呢？
"liveSassCompile.settings.generateMap": false,
默认值为true，我们设置为false即可。
3.设置css兼容性前缀
live sass compiler可以在编译时自动添加CSS兼容性前缀（-webkit-，-moz-，-ms，-o-等），如下设置：
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 3 versions"
],
其中，
- ">1%"是指 通过全球使用情况统计信息选择出的高于1%使用率的浏览器版本。
- "last 3 versions"是指 每个浏览器的最后3个版本。
这里也可以设置为具体的浏览器，如下：
"liveSassCompile.settings.autoprefix": [
"ie >= 6", //ie6以上
"firefox >= 8",
"chrome >= 24",
"Opera>=10"
],
总结
贴一张我个人习惯使用的配置：
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.autoprefix": [
"ie >= 6", //ie6以上
"firefox >= 8",
"chrome >= 24",
"Opera>=10"
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css/"
}
]
