不少开发者误以为 var(--color, red) 中的 red 是变量的“默认值”——变量未定义时会自动启用。但从规范角度看，它实际上是一个回退值，其触发门槛比想象中严格得多：仅当变量完全未声明，或被显式重置为 unset/initial 时，该回退值才会被启用。一旦变量已被声明（即便值为空字符串或非法语法，例如 --color: 123; 或 --color: #ffg;），浏览器仍然会尝试解析该变量，此时回退值并不会生效。
var() 的第二个参数并非“默认值”，而是“回退值”
许多同学误以为 var(--color, red) 中的 red 是变量未定义时的“默认值”，其实它只是当 --color **完全未声明**（或声明为无效值，如 --color: ;）时才会启用的兜底方案。一旦变量被声明（即便值不合法），浏览器仍然会尝试解析该值——此时回退值不会起作用。
- ✅ 正确触发回退：未在任何作用域中声明
--color，或用unset/initial显式重置后读取 - ❌ 不触发回退：
--color: 123;、--color: #ffg;、--color: url(等语法错误值——这些会导致计算值为inherit或继承值，而非跳转到回退 - ⚠️ 注意层级：回退值不参与级联，它只在当前
var()调用中发挥作用，不会影响其他属性或后续声明
嵌套 var() 回退值里还能继续使用 var()
回退值支持完整的 CSS 值语法，包括再次调用 var()。这有助于构建多层降级策略，比如主题色 fallback 链：
background-color: var(--bg-primary, var(--bg-base, #fff));
执行逻辑是：先查找 --bg-primary，不存在或无效 → 查找 --bg-base，仍不存在或无效 → 使用 #fff。但需要注意：
- 嵌套深度没有硬性限制，但超过 2 层容易导致调试困难
- 每个
var()的回退值都独立求值，不会缓存中间结果 - 不能在回退值中引用自身（
var(--x, var(--x, ...))），否则会报CSS parse error
回退值无法解决“变量存在但为空字符串”的问题
这是最常遇到的误区：CSS 变量允许声明空值，例如 --size: ; 或 --size: ""，此时 var(--size, 16px) 仍然返回空字符串，而非 16px。因为变量“已声明”，只是值无效。
- 验证方式：用
getComputedStyle(el).getPropertyValue('--size')检查返回是否为"" - 规避方法：避免显式赋空值；或用 JS 检测后修正：
el.style.setProperty('--size', size || '16px'); - 注意：伪类（如
:root）中声明的空变量，也会让所有后代元素的var()绕过回退
回退值对性能和兼容性的影响极小，但不要滥用
现代浏览器对 var() 回退的解析开销可以忽略不计，且 var() 本身从 Chrome 49 / Firefox 31 / Safari 9.1 就已获得支持（IE 完全不支持）。真正需要留意的是语义混淆：
- 把回退值当作“业务默认值”写死在 CSS 里，容易与 JS 动态设置的变量产生预期冲突
- 在关键动效属性（如
transition、transform）中使用复杂的回退链，可能掩盖真实值缺失的问题 - 回退值不支持 CSS 自定义属性的响应式能力（比如不能写
var(--pad, 1rem 2rem)然后指望媒体查询自动切换），必须依靠 JS 或额外变量来控制
回退值机制简洁可靠，但它的“触发条件”比直觉更为苛刻——变量是否被声明、是否为空、是否语法合法，这三个因素共同决定它是否生效。调试时建议优先使用 DevTools 的 Computed 面板查看最终计算值，而不是只盯着 Styles 面板里的变量声明行。
