WebStorm 中 CSS 变量无法通过 Ctrl+B 或 Ctrl+Shift+I 跳转或预览，Alt+F7 查找引用也基本无效；唯一可靠方式是使用 Ctrl+Shift+F 配合正则在 src/ 或 styles/ 目录中搜索。
Ctrl+B 跳转类名定义最常用，但只对选择器有效
光标停在 HTML 的 class="btn" 或 CSS 中的 .btn 上，按 Ctrl+B（Windows/Linux）或 Cmd+B（macOS），WebStorm 会跳转到对应的选择器声明块，比如 .btn { }。这个动作依赖符号索引，所以以下情况会失败：
- 类名写在
<style scoped>里，且该组件未被当前项目正确识别为 Vue/React 模块 - 使用了 SCSS 的
@mixin或嵌套规则，如.card { .title { } }，Ctrl+B通常只认顶层.card - 类名拼写与实际定义不一致（比如大小写、连字符 vs 下划线），WebStorm 不做模糊匹配
Ctrl+Shift+I 只能预览，且对 var(--xxx) 完全无效
Ctrl+Shift+I 弹出的是悬浮定义窗口，不跳转，只显示内容快照。它对 :root 下的 --color 定义可能有响应，但遇到 var(--color) 引用时基本无反应——因为 WebStorm 把 var() 当作普通字符串，不建立语义引用关系。
- 定义在
@media或@layer内部？大概率返回 “no definition found” - 变量被
/* */注释包裹，或写在<style scoped>中，直接不参与索引 - Tailwind 的
@layer utilities里混写--xxx，会导致补全、跳转、搜索全部失灵
全局搜索 --xxx 是目前唯一可靠方式
放弃依赖跳转，改用 Ctrl+Shift+F（macOS 为 Cmd+Shift+F）配合正则过滤，是最稳定、可复现的定位手段：
- 搜
--theme-color，勾选Regex，用:root\s*{[^}]*--theme-color[^}]*}匹配纯 CSS 定义块 - 如果是 SCSS 文件，正则需改为
:root\s*{[\s\S]*?--theme-color[^}]*}，否则跨行内容会被截断 - 搜索范围建议限定为
src/或styles/目录，避免在 node_modules 或构建产物中浪费时间
Alt+F7 查找所有引用位置，但需先确保符号被正确识别
把光标放在类名或变量名上按 Alt+F7，弹窗列出全部引用处。但它不是万能的：
- 如果
Alt+F7返回空结果，先检查 import 路径是否正确、tsconfig.json/jsconfig.json 是否配置了baseUrl和paths - Vue SFC 中
<style scoped>里的类，Alt+F7只能找到同组件内的使用，找不到全局 class 绑定 - 对 CSS 变量，
Alt+F7基本无效，因为 WebStorm 不将其视为可追踪符号
CSS 变量的引用关系是运行时行为，IDE 静态分析天然受限；别指望跳转能像 JS 函数那样精准，搜索 + 正则才是日常真实工作流里最值得依赖的路径。
