var() 值失效时浏览器静默降级不报错，常见原因包括变量未定义、拼写错误、样式表加载顺序错、svg内联样式不支持、回退值未触发等，调试需依赖 getcomputedstyle 和 devtools 链接跳转，但多层作用域和 js 动态设置会掩盖来源。
var() 值失效时浏览器不报错，只静默降级
浏览器遇到 var(--missing) 且该变量未定义、或值非法（比如 --size: 12; 缺单位），会直接跳过并使用回退值（如果写了）或让属性保持无效状态。它不会抛出错误，控制台也无提示——你只能靠肉眼比对“本该变色的按钮没变”来怀疑变量出了问题。
常见诱因包括：
-
:root里漏写变量声明，或拼错名字（--primay-color） - 样式表加载顺序错乱：用了变量的 CSS 在定义变量的 CSS 之前就解析了
- 在 SVG
style属性或内联style="..."中误用var()（SVG 内联样式不支持） - 回退值写成
var(--color, #000)，但--color实际是transparent或inherit——这些是合法值，回退根本不会触发
DevTools 里查不到变量实时值来源
在 Chrome 或 Firefox 的“样式”面板中，var(--spacing) 显示为一个带下划线的链接，点击能跳转到变量声明处——但前提是那个声明**已被浏览器解析且未被覆盖**。如果某组件在 JS 中反复调用 el.style.setProperty('--spacing', '16px')，DevTools 只显示最终计算出的像素值（如 margin: 16px），原始 var() 调用链彻底丢失。
更麻烦的是：
- 多个作用域嵌套时（
:root+.card+.card--compact），DevTools 不会高亮当前生效的作用域，得手动逐层展开检查 - 变量值来自 JS 动态设置，但 DevTools 的“计算后样式”只展示结果，不记录“谁在什么时候设的”
- 用
calc(var(--a) + var(--b))嵌套两层以上，鼠标悬停看不到中间变量的值，只能靠打断点或getComputedStyle手动查
深色模式切换后样式不更新，不是媒体查询失效而是变量覆盖失败
很多人以为 @media (prefers-color-scheme: dark) { :root { --bg: #111; } } 写完就万事大吉，结果深色模式下背景还是白的。真实原因是：
- 变量声明没加
!important，被后续同名变量覆盖（比如某个组件 CSS 文件后加载，重写了--bg） -
@media规则写在了:root外部，导致作用域不对（必须是:root下的子规则） - JS 代码在页面初始化后硬编码设置了
document.documentElement.style.setProperty('--bg', '#fff')，把媒体查询的值又盖掉了
这种问题没法靠“看 CSS 文件”定位，必须打开“渲染”面板，勾选“强制颜色方案”，再配合 getComputedStyle(document.documentElement).getPropertyValue('--bg') 实时验证。
calc() + var() 嵌套让性能问题和调试问题同时恶化
写 width: calc(var(--col-width) * 2 + var(--gutter)); 看似简洁，但调试时你会发现：
- DevTools 的“计算后样式”只显示最终数值（如
320px），不显示中间变量值或计算过程 - 只要
--col-width或--gutter任意一个非法，整条calc()就失效，但浏览器仍静默忽略 - 滚动/拖拽中高频更新这两个变量，会触发浏览器反复解析
calc()表达式，CPU 占用飙升，而你只看到“卡”，找不到源头
真正该做的，是把这类计算提前收口：用 JS 算好 finalWidth，然后直接设 el.style.width = finalWidth + 'px'；或者用 Houdini 的 CSS.registerProperty 注册类型化变量，让浏览器能正确插值和缓存。
变量本身不难懂，难的是它把“值从哪来”“在哪被改”“为什么没生效”这三件事全藏在了浏览器的样式计算黑盒里。越依赖 var() 做动态逻辑，就越得习惯用 getComputedStyle 和 requestAnimationFrame 打断点去捞真实值——而不是指望 DevTools 自动告诉你答案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
