为什么是sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。 SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。 两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。 而scss则和css的规范是一致的。

Live Sass编译器

官方需要使用sass编译工具，此处使用VSCode扩展，实时将SASS / SCSS文件编译/转换为CSS文件。

)

用法/快捷方式

1. Watch Sass从状态栏单击以打开实时编译，然后Stop Watching Sass从状态栏单击以打开实时编译。
2. 按F1或ctrl+shift+P键入Live Sass: Watch Sass以开始实时编译，或者按键入Live Sass: Stop Watching Sass以停止实时编译。
3. 按F1或ctrl+shift+P键入一次Live Sass: Compile Sass - Without Watch Mode 以编译Sass或Scss。

特征

• 实时SASS和SCSS编译。
• 导出CSS的可自定义文件位置。
• 可定制的导出CSS样式（expanded，compact，compressed，nested）。
• 可自定义的扩展名（.css或.min.css）。
• 快速状态栏控件。
• 通过设置排除特定文件夹。
• 实时重新加载（取决于Live Server扩展名）。
• 支持自动前缀
• 更多参数设置 https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

安装

打开VSCode编辑器，然后按ctrl+P，键入ext install live-sass

参数

    "liveSassCompile.settings.formats":[
        // 扩展
        {
            "format": "compact",//可定制的出口CSS样式（expanded，compact，compressed，nested）
            "extensionName": ".min.css",//编译后缀名
            "savePath": null//编译保存的路径
        } 
        
    ],

    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
     ]