VSCode对CSS变量（--foo）不支持F12跳转和Shift+F12查引用，因其CSS语言服务器未实现自定义属性的语义建模；可行替代方案是全局正则搜索var\(--[a-zA-Z0-9-]+\)定位使用处，或搜:root\s{1--2*}查找定义。} ↩^} ↩
CSS 变量（--foo）在 VSCode 中无法直接用 F12 跳转定义，也没有原生的 “Find All References” 支持——这不是你配置错了，是 VSCode 内置语言服务根本没实现这个能力。
为什么 F12 / Shift+F12 对 --foo 无效
CSS 变量属于 CSS 自定义属性（Custom Properties），其作用域、继承和计算都发生在运行时，VSCode 的 CSS 语言服务器（基于 CSS LSP）只做基础语法校验和简单选择器匹配，不解析变量传播链。它甚至不会把 --primary-color 当作一个可索引的符号来建模。
常见现象包括：
- F12 提示
No definition found - 悬停无提示，或只显示
any - Shift+F12 返回空列表，或仅搜到字符串匹配（比如注释里的
--primary-color）
能用的替代方案：全局搜索 + 正则精准定位
既然语义跳转走不通，就退回可靠的手动方式——但得避开默认“匹配整个单词”陷阱，否则会漏掉 class="btn btn--primary" 或 var(--primary) 这类写法。
立即学习“前端免费学习笔记（深入）”；
推荐操作：
- 按
Ctrl+Shift+F（Windows/Linux）或Cmd+Shift+F（macOS）打开全局搜索 - 关闭右上角
αβ按钮（即禁用matchWholeWord） - 开启
.*正则模式，输入：var\(--[a-zA-Z0-9-]+\)—— 可快速定位所有使用位置 - 查定义？搜：
:root\s*{[^}]*--[^}]*}或更稳一点：:root[^{]*{[^}]*--[^}]*}（注意 VSCode 正则不支持?修饰符，别用非贪婪） - 如果项目用 SCSS，变量定义多在
_variables.scss，直接搜$primary-color:更快
CSS Peek 和其他插件对 --foo 基本没用
CSS Peek 插件只处理 HTML 中的 class/id 到 CSS 选择器的映射，完全不碰自定义属性；类似地，Auto Rename Tag、IntelliSense for CSS 等插件也不会增强 --foo 的导航能力。
已验证无效的操作：
- 给
.css文件加"css.peekEnabled": true（该配置只影响 class/id 跳转） - 安装 Pylance / TypeScript 插件（它们管不了 CSS）
- 改
languageMode为 SCSS/Less（除非变量真在那儿定义，否则只是换了个不生效的上下文）
真正能提升效率的实践建议
与其等跳转，不如从源头约束写法：
- 把所有 CSS 变量集中声明在
:root块或单个_custom-properties.css文件里，避免分散在多个组件样式中 - 命名带前缀，比如
--myapp-primary-color，降低全局搜索误命中率 - 在变量定义行上方加注释，如
/* used in Button, Card */，人工维护引用说明 - 如果项目用 PostCSS 或构建工具（如 Vite），可考虑引入
postcss-custom-properties配合 lint 规则，在编译时报错未定义变量
最麻烦但最准的方式：打开 DevTools → Elements → 选中元素 → Styles 面板里点变量名右侧的小箭头，它会直接跳转到定义行——但这只能在运行时做，没法在编辑阶段用。
