var(--a, var(--b, #000)) 是合法语法，浏览器原生支持 var() 第二参数嵌套另一 var()，要求内层表达式语法完整且含回退值；作用域限当前元素，循环引用会忽略整条声明；空字符串、initial、unset 会导致回退失效。
var(--a, var(--b, #000)) 是合法语法，不是 hack
浏览器原生支持 var() 的第二个参数嵌套另一个 var()，只要内层表达式语法完整、可求值。比如 var(--bg, var(--theme-bg, #fff)) 会被解析为：先查 --bg，未定义则尝试计算 var(--theme-bg, #fff)，再未定义才用 #fff。这和 JS 的链式默认值逻辑类似，但底层是 CSS 解析器逐级展开的。
常见错误是写成 var(--bg, --theme-bg)——--theme-bg 只是属性名，不是值，直接报无效声明；或漏掉最内层回退值，如 var(--a, var(--b))，因 var(--b) 缺少 fallback，整个表达式非法。
- ✅ 正确三层：
var(--color, var(--text-color, var(--fallback, #333))) - ❌ 错误写法：
var(--color, --text-color)、var(--color, var(--text-color)) - ⚠️ 注意：嵌套深度无硬性限制，但循环引用（如
--a: var(--b, red); --b: var(--a, blue)）会导致整条声明被忽略，且不报错
多级继承失效，往往是因为作用域没对齐
var(--a, var(--b, #000)) 中的 --b 是在**当前元素作用域内查找**的，不会自动上溯到 :root 或父组件。如果只在 :root 定义了 --theme-bg，但在某个局部组件里写 .card { background: var(--bg, var(--theme-bg, #fff)); }，而该组件没定义 --bg 也没透传 --theme-bg，那 var(--theme-bg, #fff) 就会直接取 :root 的值——前提是 --theme-bg 确实定义在 :root；但如果它只定义在 .theme-dark 下，而当前元素不在其后代链中，就查不到。
- 确保关键 fallback 变量（如
--fallback-color）定义在:root，否则局部作用域查不到就会跳过整级 - 组件级变量（如
--card-bg）应显式继承或重定义，不能依赖“父元素刚好有同名变量” - 调试时用
getComputedStyle(el).getPropertyValue('--theme-bg')检查实际取到的值，比肉眼查 DOM 更可靠
空字符串、initial、unset 都会阻断回退链
回退只在变量**完全未声明**（或声明为空白 --x: ;）时触发。一旦写了 --bg: ""、--bg: initial 或 --bg: unset，浏览器就认为该变量“已定义”，后续所有 var(--bg, ...) 都会取这个值，不再往下走。
-
--bg: ""→ 渲染为透明背景，var(--bg, #fff)不触发回退 -
--bg: initial→ 对自定义属性等价于“未定义”，但行为不稳定，部分旧版 Safari 会视为有效值 - 真正安全的清空方式：删掉该行声明，或改用
--bg: inherit（仅对原生属性有效，对自定义属性无效，慎用）
最容易被忽略的是：你在 JS 里调用 el.style.setProperty('--bg', '')，相当于写了 --bg: ""，回退立刻失效。
主题切换时，避免在 :root 中用 var() 嵌套定义变量
比如写 :root { --text-primary: var(--theme-text, #222); --theme-text: #333; }，在部分 Safari 版本中，--text-primary 会解析失败，最终为 initial。这不是规范问题，而是 Safari 的早期实现缺陷，至今未完全修复。
正确做法是把基础变量放最顶层，主题变量做覆盖：
- ✅ 安全写法：
:root { --text-primary: #222; }，然后.theme-dark { --text-primary: #eee; } - ✅ 或用 JS 动态 setProperty，绕过 CSS 解析阶段
- ❌ 避免：
:root { --text-primary: var(--theme-text, #222); --theme-text: #eee; }
复杂点在于：你得同时管理“变量定义位置”“作用域层级”“JS 修改时机”三者，缺一不可。一个 setProperty 调用顺序错位，就可能导致某层回退永远卡在中间值上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
