如何在CSS变量中设置默认回退值_经由var函数的第二个参数定义
作者：袖梨
2026-06-19
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 或额外变量控制
