var() 的第二个参数是“回退值”，仅在变量未定义或语法无效时生效；若已定义为空字符串、unset 或 initial，则仍使用该值，不会回退。
var() 函数第二个参数不是“默认值”，而是“回退值”
很多人误以为 var(--color, red) 里的 red 是“默认值”，其实它只在 --color **未定义或语法无效**时生效。注意：如果变量已定义但值为空字符串、unset 或 initial，它仍会使用该变量值，不会回退。
常见错误现象：
– 定义了 :root { --text-color: ""; }，但 color: var(--text-color, #333); 仍渲染成透明文字（空字符串被接受）
– 使用 var(--size, 1rem)，但组件库覆盖了 --size 为 invalid-value，此时回退才触发
- 回退值支持任意合法 CSS 值：颜色、长度、甚至另一个
var()（如var(--bg, var(--fallback-bg, #fff))） - 回退值中不能包含逗号（否则会被截断），想写
rgba(0,0,0,0.5)没问题，但1px solid, red会出错 - 嵌套
var()回退是安全的，浏览器按顺序解析，不会无限递归
用 calc() + var() 实现“条件性回退”
CSS 本身没有 if 判断，但可通过 calc() 配合变量控制是否启用回退逻辑。典型场景：当主题色未设置时，自动 fallback 到 light/dark 模式适配值。
例如：
立即学习“前端免费学习笔记（深入）”；
body {
--primary: var(--theme-primary);
--primary-fallback: #007bff;
--primary-safe: calc((1 * var(--primary, 0)) + var(--primary-fallback));
}这招本质是利用 calc() 对无效值报错后降级到回退值的特性——但更稳的方式是直接用两层 var()：
.btn {
background: var(--btn-bg, var(--primary, #007bff));
}- 第一层
var(--btn-bg, ...)尝试读取组件级变量 - 第二层
var(--primary, #007bff)是主题级兜底 - 这种链式写法比
calc()更可读、更兼容（IE 不支持calc()中嵌套var()）
动态 JS 设置变量时，回退值不自动刷新
用 element.style.setProperty('--color', '') 清空变量，CSS 不会立刻切到回退值——因为 '' 是合法空字符串，不是“未定义”。只有删掉变量或设为无效值（如 'not-a-color'）才会触发回退。
- 正确清空并触发回退：
element.style.removeProperty('--color') - 或设为无效值：
element.style.setProperty('--color', 'invalid')（需确保该值在目标属性上下文中非法，如color: invalid会失败） - 用
getComputedStyle(el).getPropertyValue('--color')检查时，返回空字符串 ≠ 变量未定义，要结合getPropertyValue是否为''和是否在:root中声明来综合判断
回退值在 @media 或 :is() 中的行为差异
回退值本身不响应媒体查询变化，但变量可以。容易忽略的是：当变量定义在 @media 块内，而 var() 在外层使用，回退值仅在变量完全不可用时生效，不参与媒体查询匹配逻辑。
例如：
立即学习“前端免费学习笔记（深入）”；
:root { --gap: 8px; }
@media (min-width: 768px) {
:root { --gap: 16px; }
}
.card { margin: var(--gap, 12px); }在小屏下 --gap 是 8px，大屏下是 16px，12px 永远不会用到——除非你把 :root 中的 --gap 删掉。
- 回退值是静态的，无法通过
@media切换 - 若需响应式回退，得手动在每个媒体查询里重复写
var(--gap, 12px)并配合不同变量名 -
:is(.dark, .light) { --text: var(--text-dark, #000); }这种写法中，回退值也不受:is()影响，只看--text-dark是否存在
回退值看着简单，真正难的是判断“变量到底算不算有效”——浏览器对空字符串、inherit、自定义语法错误的处理各不相同，建议在关键路径上用 DevTools 的 Computed 面板逐层验证实际取值。
