在vscode中的使用sass插件

介绍

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
官网: https://sass-lang.com/

在vscode中安装

安装插件: Live Sass Compiler
此插件可以直接将sass文件转为css文件
官方文档: https://github.com/ritwickdey/vscode-live-sass-compiler?tab=readme-ov-file

安装后需要进行配置

1. 点击扩展设置
   
2. 编辑json文件
   

我的配置如下（仅供参考）

{
    "liveSassCompile.settings.formats":[
        // This is Default.
        {
            /*
                1.nested: 嵌套模式
                2.compact: 紧凑模式
                3.expanded: 展开模式
                4.compressed: 压缩模式
            */
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/./css"
        },
    ],
    // 排除目录
    "liveSassCompile.settings.excludeList": [ 
        "**/node_modules/**",
        ".vscode/**" 
    ],
    // 是否添加兼容前缀
    "liveSassCompile.settings.autoprefix": [

        "> 1%",
        "last 2 versions"
    ],
    // 控制资源管理器是否应在通过回收站删除文件时要求确认。
    "explorer.confirmDelete": false,
    // 是否生成.map文件
    "liveSassCompile.settings.generateMap": false
}

如何使用

安装成功后，会在vscode的下方出现watch Sass，点击后就会对你目前的sass文件进行监听，自动生成css文件