CSS变量默认回退值：var()函数第二个参数设置详解

不少开发者误以为 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 面板里的变量声明行。