vscode sass

https://blog.csdn.net/weixin_43834227/article/details/106057473

 

live sass compiler 插件可实时自动将sass解析成css,同时可以自动添加css 兼容性前缀，-webkit-,-moz-, -ms-,-o-等。
我们平时在做一些简单项目，比如说单一活动页面，并不需要搭建前端自动化的框架时，可以使用vs code 的live sass compiler插件，自动将scss转换为css，以下为使用步骤。

在vs code扩展中搜索live sass compiler 并安装。

在设置中搜索live sass compiler ,在setting.json中添加配置。可根据需要进行修改。

以下为配置代码：
"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css"
    },
  ],
  "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
  ],
  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 3 versions"
  ],

更多配置项详见： live sass compiler

在项目的css 文件夹下新建一个index.scss 文件，在vscode编辑器中启动live sass compiler ,会自动生成对应的index.css 文件。
我使用的是快捷键ctrl+shift+p 找到live sass compiler ,点击运行即可。

4.直接在index.scss 编写css代码即可，插件会自动解析到对应名字的css文件中。