使用vscode自动编译sass

由于我在工作中用的编辑器是 vscode ，所以记录一下vscode 编译sass 的配置

vs code 编译saass

1.在扩展里搜索“easy sass”,直接进行安装即可

 

 

 

2.安装后默认已经做了配置，可以直接进行编译。

　　eg:新建一个后缀为.scss文件

 

 

 

 修改保存后，自动生成了.css 和.min.css 两个文件

 

 

 

 然而，很多情况下我们在开发当中，sass 和css文件是两个不同的目录。所以这就需要做些特殊的配置。

 

 

vscode 中 Easy Sass 的配置

 

1. 点击Easy Sass 插件的“设置”按钮，如下图：

 

 

 

 

 

 

 

 

2. 选择“配置扩展设置”选项，进入到设置页面

3. 点击“在setting.json中编辑”进入settings.json文件

 

 

 

 

 

 

 

 

 

 

 

 

 4. 根据需求进行配置即可

　　eg: 将sass目录下的.sass文件编译生成的文件放到css文件夹下，配置如下：

 

 

"easysass.formats": [ 
        //nested：嵌套缩进的 css 代码。
        //expanded：没有缩进的、扩展的css代码。
        //compact：简洁格式的 css 代码。
        //compressed：压缩后的 css 代码

        {
            "format": "expanded",
            "extension": ".css" //设置编译输出的文件名
        },
        {
            "format": "compressed",
            "extension": ".min.css" //设置编译输出的文件名
        }
    ],
    "easysass.targetDir": "./css/" //提供 css 输出路径的设置（可以是绝对路径或者相对路径）

 

页面中新建两个文件夹scss 和 css

 

 

 

demo.css 保存编译后，则将编译后的文件放到了指定的目录css文件夹下，如下图：

 

 

 

 

在文件夹中就得到了相对应的编译后的文件。

 

 

 

 

 

 

 

 编译后：