DevTools 的 Computed 面板不显示 CSS 变量即提示拼写或作用域错误；getComputedStyle 属性列表中无变量名说明未声明，有但值为空则声明无效；简写属性中 var() 回退值可能静默失效，应拆分为独立属性。
检查 DevTools 中变量是否出现在 Computed 面板
浏览器不会因 CSS 变量拼错而报错，但会在 Computed 面板中“不显示”该变量——这是最快速的初步验证方式。打开 Elements 面板，选中目标元素，切换到 Computed 标签页，在搜索框输入 --your-var-name，如果完全没结果，大概率是定义名、引用名或作用域三者之一不匹配。
复制粘贴比对定义与引用处的变量名
人眼容易忽略多一个字母、少一个连字符或大小写差异，比如 --primary-color 和 --primay-color（y 少一横）、--BG 和 --bg。实际排查时应：
- 在 CSS 文件中用 Ctrl+F 搜索
--xxx，确认定义位置和完整拼写 - 再搜
var(--xxx)，看所有引用是否与定义完全一致（包括连字符数、大小写、空格） - 注意编辑器可能高亮错误拼写，但 CSS 本身不校验，不能依赖语法高亮
用 getComputedStyle 确认变量是否被识别
getComputedStyle(document.documentElement).getPropertyValue('--x') 返回空字符串 ""，不代表变量未定义——它可能已定义但值非法（如 --x: ; 或 --x: none;）。真正未定义时，该调用仍返回 ""，所以不能单靠这个判断。
更可靠的方式是：
立即学习“前端免费学习笔记（深入）”；
- 在 Console 中执行
getComputedStyle(document.documentElement)，展开查看属性列表里是否有你的变量名（带--前缀） - 若列表中没有，说明变量未声明；若有但值为空，说明声明了但值无效
- 配合 DevTools 的 Styles 面板，点击对应
var(--x)展开箭头，看是否标红或显示“invalid”
避免在简写属性中单独依赖 var() 回退值
像 border: 1px solid var(--border-color, #ccc) 这种写法，一旦 --border-color 拼错或未定义，整个 border 声明会降级为 border: 1px solid;，最终各方向 color 全为空，页面上看起来就是“边框消失”，而非回退成 #ccc。
这类问题难定位，因为：
- 控制台无提示
- Computed 面板里 border-top-color 显示为
;，不是#ccc - 推荐拆成独立属性写：
border-width: 1px; border-style: solid; border-color: var(--border-color, #ccc);
拼写错误本身不难修复，难的是它不报错、不警告、不打断流程，只让样式静默失效。每次改完颜色/间距没反应，别急着调优先级或重写规则，先 Ctrl+F 查两遍变量名——90% 的时间都省在这一步上。
