安装Sass相关插件并配置Live Sass Compiler，可实现SCSS实时编译与浏览器自动刷新。1. 安装Sass、Live Sass Compiler、SCSS IntelliSense和Path Intellisense插件；2. 在settings.json中设置输出格式、保存路径及排除目录；3. 点击“Watch Sass”启动编译，配合Live Server实现页面热更新；4. 启用Emmet、设置默认格式化工具并开启保存自动格式化以提升编码体验。
在 VSCode 中配置 Sass/SCSS 开发环境，能显著提升前端开发效率。关键在于安装合适的插件、配置编译选项以及启用语法高亮和智能提示。下面是如何搭建一个高效 Sass/SCSS 工作流的实用指南。
1. 安装必备插件
VSCode 本身不支持直接编译 Sass，需要借助扩展来增强功能。以下是几个核心插件：
- Sass（syler.sass-indented）：提供 .sass 和 .scss 文件的语法高亮与折叠支持。
- Live Sass Compiler（ritwickdey.live-sass）：实时将 SCSS 编译为 CSS，并自动刷新浏览器（配合 Live Server 使用更佳）。
- SCSS IntelliSense：提供变量、mixin 的跳转和自动补全功能。
- Path Intellisense：自动补全文件路径，尤其在使用 @import 时非常方便。
打开 VSCode 扩展面板（Ctrl+Shift+X），搜索并安装上述插件即可。
2. 配置 Live Sass Compiler
Live Sass Compiler 支持自定义输出格式、保存路径和排除目录。在项目根目录创建 .vscode/settings.json 文件进行配置：
立即学习“前端免费学习笔记（深入）”；
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/css"
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": false
}
说明：
NopCommerce (ASP.NET商城)
下载
nopCommerce 是一个由ASP.NET多层模式开发的开源电子商城系统，可以自行设置模板、配置灵活、功能强大，它内含一个目录前端和一个管理工具后端。前端包括用户注册、商品购买(可以进行评论)、投票、Blog等，后端有类别管理、产品管理、客户及角色管理、订单管理、纳税管理、国家（地区管理）、邮件发送、消息模板、新闻发布、blog管理,可以对列表数据进行XML导出。
- format 可选 expanded、compressed 等，用于控制生成 CSS 的样式。
- savePath 指定编译后 CSS 输出的目录，可使用相对路径或 /表示根目录。
- excludeList 避免监控不必要的文件夹。
3. 启动自动编译与预览
配置完成后，打开任意 .scss 文件，底部状态栏会出现 “Watch Sass” 按钮。点击后，保存 SCSS 文件会自动编译成 CSS。
若想实现浏览器自动刷新：
- 安装 Live Server 插件。
- 右键 HTML 文件，选择 “Open with Live Server”，修改样式后页面将自动更新。
注意：确保 HTML 引入的是编译后的 CSS 文件，而不是原始 SCSS。
4. 提升编码体验的额外设置
让 SCSS 写起来更顺手：
- 启用 Emmet：在 SCSS 文件中使用 Emmet 缩写，可在 settings.json 中添加：
"emmet.includeLanguages": { "scss": "css" } - 设置默认 formatter：SCSS IntelliSense 或 PrimeTek.primeng-snippets 可提升代码整洁度。
- 开启保存时自动格式化：
"editor.formatOnSave": true
基本上就这些。配置一次，长期受益。Sass 能帮你写出更结构化、易维护的样式代码，搭配 VSCode 的生态，开发体验很流畅。
