var(--name, fallback)仅在变量未声明或为unset时生效；已声明为空字符串、initial或无效值（如拼错）均不触发回退，多级回退需嵌套var()且最内层为字面量，IE需前置兼容值。
直接用 var(--name, fallback) 的第二个参数，但这个“fallback”只在变量**完全未声明**或被设为 unset 时生效；已声明为空字符串、initial、拼错值（如 bluue）等，都不会触发它。
为什么 var(--color, #000) 经常不回退？
最常见误解是把“没赋值”当成“未定义”。实际上：
-
:root { --color: ""; }→var(--color, #000)返回空字符串，不回退 -
:root { --color: initial; }→ 按 CSS 继承规则降级（比如color变成inherit），不进回退 -
:root { --color: bluue; }（拼错）→ 解析失败，视为未定义，此时才用#000
验证方式：用 getComputedStyle(el).getPropertyValue('--color') 查返回值。若为 ""，说明已声明；若为 null，才是真未定义。
多级回退怎么写才合法？
回退值本身可以是另一个 var()，但必须是完整可求值表达式，不能只写变量名：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
background-color: var(--bg-primary, var(--bg-base, #fff)); - ❌ 错误：
background-color: var(--bg-primary, --bg-base);（整条声明被忽略） - ⚠️ 禁止循环：
--a: var(--b, red); --b: var(--a, blue);会报CSS Parser: cycle detected - 建议嵌套不超过两层，最内层必须是字面量（如
#000、1rem）
IE 和旧 Safari 怎么兜底？
IE11 完全不识别 var()，连回退值都丢弃——你写的 color: var(--text, #333); 在 IE 里整行静默失效。
- 可靠做法：同一选择器内前置兼容值，
color: #333; color: var(--text, #333); - PostCSS 替换必须配
preserve: false，否则只追加不删除var()行 - 变量需定义在
:root，且值为静态常量（--size: 12px;✅，--size: calc(1rem + 2px);❌） - 别信
@supports (color: var(--x))—— IE 直接解析报错，JS 都没机会执行
真正容易被忽略的是：回退值不是“默认值”，它不解决“变量存在但为空”的问题；而 JS 动态设置时，el.style.setProperty('--x', '') 不会触发回退，只有 removeProperty 或 setProperty('--x', 'unset') 才行。
