scss2css vscode设置_Vscode live sass compiler插件的自定义方法

Vscode live sass compiler是vscode编辑器的一个sass自动解析插件。

它可以自动将sass解析成css，并可以自动添加css兼容性前缀，-webkit-，-moz-，-ms，-o-等。

并且可以自定义css文件解析后的代码样式，是展开(expend)的还是压缩(compressed)的，还是其它的都可以自定义。

可以自定义css是否对样式添加兼容性前缀，兼容到什么级别，是否针对IE添加兼容性代码等。

插件的使用方法：

插件里直接搜索vscode live sass安装即可。

安装后，新建scss文件，在下面的蓝色状态栏中点击watch sass，即可自动解析sass为css文件。只要是状态栏中插件状态是watching状态，每次保存sass文件时都会自动解析。

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

自定义代码：

下面的自定义代码的作用是将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文件，保存到项目目录下的.vscode文件夹下。

更详细的设置请参考官方文档：

https://github.com/ritwickdey/vscode-live-sass-compiler