需安装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。
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 加载）。
