css变量不支持fallback嵌套，仅接受字面值；变量引用链依赖声明顺序，后声明变量可引用先声明变量的值；变量无响应式更新能力，js修改需手动同步。
可以嵌套引用，但不是“函数式嵌套”，而是靠变量声明顺序和作用域链形成的单层递归展开。直接在 var() 里写 var(--a, var(--b)) 会失败，浏览器当字符串处理。
var() 的第二个参数不支持嵌套调用
很多人试过 var(--color, var(--fallback-color))，结果发现 fallback 没生效，或者值变成字面量 "var(--fallback-color)" 字符串。这是因为 CSS 规范明确禁止在 var() 的 fallback（第二个参数）中再用 var() —— 它只接受字面值、数字、颜色等原始类型。
-
--text-color: var(--primary, #333);✅ 合法，fallback 是字面色值 -
--text-color: var(--primary, var(--base-color));❌ 非法，第二个var()不被解析 - 浏览器会把整个
var(--base-color)当作字符串字面量，而不是变量求值
变量间引用链必须按顺序声明
CSS 变量的“嵌套效果”本质是依赖声明顺序的引用链：后定义的变量用前一个变量的值作为初始值。这要求你必须把被依赖的变量写在前面，否则解析时值为 invalid。
-
:root { --base: #2563eb; --theme: var(--base); --ui: var(--theme); }✅ 最终var(--ui)解析为#2563eb -
:root { --theme: var(--base); --base: #2563eb; }❌--theme初始值无效，后续无法修复 - 这种链式只展开一层：如果
--a: var(--b); --b: var(--c);，var(--a)仍能取到--c的值，但不是“多层嵌套”，而是浏览器递归解析的结果
深色模式或主题切换时 fallback 链容易失效
想用 fallback 实现“未定义主变量 → 退到主题变量 → 再退到基础变量”，光靠 CSS 原生做不到。因为 fallback 不支持变量，而变量链又不能跨作用域动态响应。
- 例如：
.card { --text: var(--card-text, var(--theme-text)); }—— 第二个var()不起作用 - 真正可行的做法是：把 fallback 逻辑移到变量声明层，比如让
--theme-text本身已基于--base-text正确定义：--theme-text: var(--base-text, #1f2937); - 如果需要运行时切换（如 JS 控制暗黑模式），应直接设置
--text，而不是依赖 fallback 链；否则旧值残留、新变量未及时覆盖，样式就错乱
最易被忽略的一点：CSS 变量没有响应式重计算能力。你在 JS 里改了 --base，所有引用它的 --theme、--ui 不会自动更新 —— 它们只在声明那一刻取了一次值。真要动态联动，得靠 JS 手动同步，或者用构建时展开（如 PostCSS 插件）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
