var(--name, fallback) 仅在变量完全未声明或显式设为 unset 时触发回退；已声明为空字符串、initial 或无效值（如拼错）均不触发，且多级回退须嵌套书写，禁止传变量名或缺参数。
直接写 var(--name, fallback) 就行，但“未定义”有严格定义：仅当变量完全没声明，或被设为 unset 时才触发回退；已声明为空字符串、initial、拼错值（如 bluue）等，都不会走 fallback。
var() 的第二个参数只在“真未定义”时生效
很多人以为 var(--color, #000) 能兜住所有异常情况，其实它只响应两种状态：
-
:root { }里压根没出现--color - 显式设置了
--color: unset（注意不是initial或空字符串）
以下情况均不触发回退：
-
--color: ""→ 返回空字符串，属性失效（如color: ""被忽略） -
--color: initial→ 按 CSS 继承规则降级（color变成inherit） -
--color: bluue（拼错）→ 浏览器解析失败，视为未定义，此时才触发回退
验证是否真未定义：getComputedStyle(el).getPropertyValue('--color') 返回 null 才是未定义；返回 "" 表示已声明但为空。
立即学习“前端免费学习笔记（深入）”；
多级回退必须用嵌套 var()，不能传变量名
想实现 --primary → --base → #fff 的链式 fallback，必须写成：
background-color: var(--primary, var(--base, #fff));
以下写法是非法的，整条 CSS 声明会被浏览器忽略：
-
var(--primary, --base)（--base不是值，是变量名） -
var(--primary, var(--base))（缺第二参数，语法不完整）
嵌套安全建议：
- 最多两层，最内层必须是字面量（如
#000、1rem） - 避免循环引用：
--a: var(--b, red); --b: var(--a, blue)→ Chrome 报CSS Parser: cycle detected - 旧 Safari 对
calc(var(--x))类写法可能静默失效，别在回退值里塞函数调用
JS 动态设置变量时，清空 ≠ 触发回退
用 JS 设置变量后想让回退生效，不能只赋空值：
-
el.style.setProperty('--size', '')→font-size: var(--size, 16px)仍取空字符串 -
el.style.removeProperty('--size')→ 真正移除声明，回退生效 -
el.style.setProperty('--size', 'unset')→ 也能触发回退，但 IE 和部分旧 Safari 不支持
更稳妥的做法是业务层兜底：
el.style.setProperty('--size', size || '16px');
这样既避免空值污染，又不用依赖回退机制。
真正容易被忽略的是语义边界：CSS 变量的“已声明”和“未声明”之间没有中间态。回退值不是业务默认值，它只是一次性查找失败后的字面量兜底——一旦你在 :root 或组件上写了 --x: ""，所有后代的 var(--x, ...) 都不会再跳转。
