sass简介
Sass（Syntactically Awesome Style Sheets,英文官方文档
）是一种CSS预处理器，扩展了CSS的功能并提供了更高效的样式表编写方式。它兼容所有CSS版本，通过变量、嵌套、混合（Mixins）、继承等特性简化了复杂样式表的开发。
Sass支持两种语法格式：
- SCSS（Sassy CSS）：后缀为.scss，兼容CSS语法，使用大括号和分号。
- 缩进语法（Indented Syntax）：后缀为.sass，省略大括号和分号，依赖缩进。
编译与工具
Sass文件需编译为标准CSS才能被浏览器识别。常用工具包括：
命令行工具：通过Dart Sass或LibSass执行编译。
构建工具集成：Webpack（sass-loader）、Gulp（gulp-sass）等。
开发环境插件：VS Code的Live Sass Compiler扩展。
安装Sass插件
在vscode扩展市场搜索sass插件，当前选中的是Live Sass Compiler，sass实时编译插件
配置sass插件
在插件扩展市场打开Live Sass Compiler的配置页面。
更改配置如下：formats是默认已存在配置，可替换或者自行更改属性均可。generateMap、autoprefix为新增。formats新版只有”expanded、compressed“两种，可查看其使用说明。
"liveSassCompile.settings.formats": [
/* nested-嵌套格式,嵌套格式（保留层级结构）已废除，用的话会报错
* expanded-展开格式（默认值，保留缩进和换行）
* compact-紧凑格式,紧凑格式（每条规则独占一行）已废除，用的话会报错
* compressed-压缩格式,压缩为单行（删除所有空格和注释）
*/
{
"format": "expanded",//定制输出得css格式
"extensionName": ".css",
"savePath": "~/../css",//指定存储地址
"savePathReplacementPairs": null
}
],
/* 生成css映射文件 */
"liveSassCompile.settings.generateMap": true,
/* 是否添加兼容前缀，例如--webkit-、-moz-、-ms-、-o-等 */
"liveSassCompile.settings.autoprefix": [
"last 10 versions",
"> 1%",
]
编写sass
新建一个名字为sassDemo的项目，在项目下新建一个sass文件夹，再新建一个demo.scss文件，内容如下：
$background-color: #000000;
P{
color: $background-color;
}
保存后即可看到与sass同目录生成了一个css文件，且已存在demo.css、demo.css.map。如果生成不成功，点击下方圈中的红色监听处。
使用Sass
在项目根目录新建一个index.html。（在文件内输入!回车，可自动生成简易html内容）
引入的样式文件为最终输出的css文件，编写的时候只需要维护sass即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>