需安装Sass IntelliSense扩展、设置SCSS语言模式、配置includePaths路径、验证变量/mixin补全。依次执行：安装扩展→设文件关联为SCSS→在settings.json中配置sass.intellisense.includePaths→编写合法Sass语法触发Ctrl+Space补全。
如果您在使用 VSCode 编辑 Sass 或 SCSS 文件时发现类名、变量、混合宏（mixin）或函数无法自动补全，可能是由于缺少对应的语言支持或 IntelliSense 配置未生效。以下是启用并优化 Sass/SCSS 智能提示功能的多种方法：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装官方推荐的 Sass IntelliSense 扩展
VSCode 原生不内置 Sass/SCSS 的深度语义分析能力，需借助社区维护度高、兼容性稳定的扩展来提供变量引用跳转、@import 路径提示、颜色预览等增强功能。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入 Sass IntelliSense，确认作者为 Mika Arono（ID: mikaello.sass-intellisense）。
3、点击“安装”，安装完成后重启 VSCode 或重新加载窗口（Cmd+Shift+P → “Developer: Reload Window”）。
二、配置 SCSS 文件关联与语言模式
VSCode 必须正确识别 .scss 文件的语言模式，才能激活扩展提供的语法服务；若文件被误判为纯 CSS，IntelliSense 将完全失效。
1、打开任意 .scss 文件。
2、点击右下角显示的语言模式（如“CSS”），在弹出菜单中选择 SCSS。
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
3、如需全局默认，按下 Cmd+Shift+P，输入“Preferences: Configure File Association for .scss”，选择 SCSS 并回车确认。
三、启用项目级 @import 路径解析
Sass IntelliSense 默认仅解析相对路径，若项目使用了 Webpack 别名（如 @/styles）或 Dart Sass 的 --load-path 参数，需手动配置路径映射以支持跨目录跳转和补全。
1、在工作区根目录创建或编辑 .vscode/settings.json 文件。
2、添加以下配置项：
3、在 sass.intellisense.includePaths 数组中填入绝对路径或相对于工作区的路径，例如 ["src/styles", "node_modules/bootstrap/scss"]。
四、验证变量与 mixin 补全行为
扩展生效后，需在真实编码上下文中触发补全，而非静态文本区域；Sass IntelliSense 依赖 AST 解析，因此需确保语法结构合法且无未闭合符号干扰。
1、在 .scss 文件中定义一个变量，例如 $primary-color: #007bff;。
2、在后续规则块中输入 $pri，按下 Ctrl+Space 弹出补全列表，应出现该变量名。
3、输入 @incl 后触发补全，应列出已声明的 mixin 名称（需已通过 @import 加载）。
