安装Live Sass Compiler和Live Server扩展，配置输出路径后启动监听，保存SCSS文件时自动编译为CSS，Live Server检测到变化并刷新浏览器，实现样式实时预览。
Live Sass Compiler 是 Visual Studio Code 中一个非常实用的扩展，它能将 Sass（.scss 或 .sass）文件自动编译为 CSS，并支持实时预览样式变化。要实现样式实时预览，需结合编译功能与浏览器刷新机制。
1. 安装并配置 Live Sass Compiler
在 VS Code 扩展市场中搜索 Live Sass Compiler 并安装。安装完成后，打开一个包含 .scss 文件的项目。
默认情况下，保存 .scss 文件时会自动生成对应的 .css 和 .css.map 文件。你可以在项目根目录创建 settings.json 来自定义输出路径：
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
],
"liveSassCompile.settings.generateMap": true
}
上面配置表示：编译后的 CSS 文件输出到项目下的 /css 目录中，格式为展开式（便于调试）。
立即学习“前端免费学习笔记（深入）”；
2. 启动实时编译
点击 VS Code 编辑器右下角的 Watch Sass 按钮（或按 Ctrl+Shift+P 输入 “Live Sass: Watch Sass”），启动监听模式。
此时，只要你修改并保存任何一个 .scss 文件，Live Sass Compiler 就会立即生成更新后的 CSS 文件。
3. 实现浏览器实时刷新
Live Sass Compiler 本身不提供浏览器自动刷新功能，需要配合其他工具实现真正意义上的“实时预览”。
推荐使用 Live Server 扩展：
- 安装 VS Code 扩展：Live Server
- 在 HTML 文件中引入编译生成的 CSS 文件（如：
） - 右键点击 HTML 文件，选择 “Open with Live Server”
这样，当你修改 .scss 文件并保存时，Sass 被编译成 CSS，Live Server 检测到 CSS 文件变化，自动刷新浏览器页面。
4. 工作流程总结
完整实时预览流程如下：
- 编写 SCSS 代码并保存 → Live Sass Compiler 编译为 CSS
- CSS 文件更新 → Live Server 检测到静态资源变化
- 浏览器自动刷新，展示最新样式
基本上就这些。只要配置正确，整个过程流畅自然，极大提升前端开发效率。
