如何在CSS变量中设置默认回退值_经由var函数的第二个参数定义

var()的第二个参数是回退值，仅在变量完全未声明或声明为unset/initial时生效；若已声明为空字符串、非法值或无效语法，则不触发回退，且回退值中可嵌套var()实现多级降级。

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 面板里的变量声明行。