vscode编译sass/scss

虽然现在目前的项目都有webpack来帮助sass/scss，但是，有些老项目还用jquery的情况下如果不想依赖任何脚手架，但是又想使用sass/scss的时候，就可以借助vscode的插件来帮助编译，这个插件也同样支持scss，如下就是具体的实现步骤。

第一步：安装easy sass

打开vscode，搜索easy sass，如下是安装完毕的。

easy-sass.png

第二步：修改vscode的配置

打开settings.json，通过文件-首选项-设置，可以找到settings.json入口，然后加入如下配置代码：

"easysass.compileAfterSave": true, 
 "easysass.formats": [ //nested：嵌套缩进的 css 代码。
//expanded：没有缩进的、扩展的css代码。
//compact：简洁格式的 css 代码。
//compressed：压缩后的 css 代码
    {
        "format": "expanded",
        "extension": ".css"
    },
    {
        "format": "compressed",
        "extension": ".min.css"
    }
],
"easysass.targetDir": "css/" //路径

第三步：新建sass文件夹和css文件夹

如果你用的是scss的话，那你新建的文件后缀改成scss即可。

sass-compiler.png

第四步：编译

这时候你在try.sass中写sass的时候，你会发现，在css文件夹下自动会编译出一个对应压缩完的css文件，这样就完成了。

try.sass

.container
    width: 100px
    height: 100px
    .box
        color: red

try.css

.container{width:100px;height:100px}.container .box{color:red}