var(--a, var(--b))无效，因fallback参数必须是合法css值而非表达式，浏览器会忽略整条声明；正确写法需每层fallback均为字面量，如var(--bg, var(--theme-bg, #fff))。
CSS变量本身不会因循环引用报错，但会导致值失效、静默回退到初始值，甚至主题切换失灵——问题不在语法，而在变量定义顺序、作用域层级和 fallback 写法。
var(--a, var(--b)) 为什么无效？
这种写法违反 CSS 规范：fallback 参数必须是合法 CSS 值，var(--b) 不是值，而是表达式。浏览器会直接忽略整条声明，不报错也不计算。
-
var(--bg, #fff)✅ 合法 fallback -
var(--bg, var(--theme-bg, #fff))✅ 第二层有字面 fallback，整个链可求值 -
var(--bg, var(--theme-bg))❌ 第二层无 fallback，整条声明被丢弃 - 嵌套最多三层（
var(--x, var(--y, var(--z, #000)))），但不能形成闭环
:root 中变量声明顺序决定一切
CSS 变量按从上到下顺序解析，后声明的变量可引用前面已定义的；反过来就拿不到值——哪怕都在 :root 里，顺序错就失效。
- ✅ 正确：
--base: #333;→--primary: var(--base);→--text: var(--primary); - ❌ 错误：
--primary: var(--base);→--base: #333;→--primary求值时--base尚未声明，结果为 invalid - 注意：
.card { --base: #222; }不会触发--primary重计算，它仍用:root里的旧值
跨作用域反向依赖是隐形陷阱
变量不是响应式数据。父元素改了 --base，子元素里已声明的 --derived: var(--base) 不会自动更新。所谓“循环”，常源于误以为这种引用是动态的。
- 禁止写：
:root { --color: var(--theme-color); }+[data-theme="dark"] { --theme-color: #111; }→--color永远是 invalid - 正确做法：所有终端变量（如
--text-color）都直接基于主题开关声明：[data-theme="dark"] { --text-color: #eee; } - 调试技巧：DevTools 的 Computed 面板里若显示
invalid，优先检查拼写、声明顺序、或是否在未定义变量上做了链式引用
真正棘手的从来不是怎么写 var()，而是谁该负责定义终端值——把变量当作“配置项”而非“计算表达式”，能避开绝大多数隐性循环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
