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/"
}
]