var()函数不支持嵌套调用，如var(--a, var(--b))无效；应通过变量引用链（按依赖顺序声明）、构建时展开或js补位实现fallback，注意类型匹配与作用域限制。
var() 函数本身不支持嵌套调用
直接写 var(--color-primary, var(--fallback)) 或 var(--theme-color, var(--base-color)) 是无效的——CSS 规范明确禁止在 var() 的 fallback 参数里再用 var()。浏览器会把第二个 var() 当作普通字符串字面量，而不是变量解析，最终可能得到未定义值或字面文本。
用多级变量声明模拟“嵌套”效果
所谓“嵌套调用”，实际是靠变量间的引用链实现：后定义的变量用前一个变量的值作为初始值。这依赖于 CSS 自顶向下解析顺序和变量作用域规则。
- 必须按依赖顺序声明：被引用的变量（如
--base-color）要先于引用它的变量（如--theme-color）出现 - 作用域很重要：子选择器中重定义
--theme-color会覆盖父级，但不会影响它所引用的--base-color - 不能跨作用域反向引用：在 :root 中定义
--theme-color: var(--base-color)，然后在组件里改--base-color，此时--theme-color不会自动更新（CSS 变量无响应式重计算）
示例：
:root {
--base-color: #333;
--theme-color: var(--base-color); /* ✅ 合法：引用已声明变量 */
--text-color: var(--theme-color); /* ✅ 链式引用，仍合法 */
}
<p>.card {
--base-color: #222; /<em> 重定义 base </em>/
color: var(--text-color); /<em> ❌ 这里还是 #333，不是 #222 </em>/
}</p>
fallback 场景下需要“嵌套”怎么办
当主变量未定义、想退回到另一个变量时，var(--a, var(--b)) 不生效。可行方案只有两种：
- **服务端/构建时处理**：用 PostCSS 插件（如
postcss-css-variables）提前展开变量链，把var(--text-color)替换为最终值 - **运行时 JS 补位**：监听
propertychange或用CSS.supports('color', 'var(--x)')检测支持度，再用getComputedStyle+getPropertyValue手动 fallback - **设计上规避**：fallback 只用字面值（
var(--c, #000)），把“变量 fallback”逻辑移到声明层（即确保--c本身已基于--d正确定义）
注意 calc() 和 var() 混用时的隐式嵌套陷阱
calc() 内部允许 var()，看起来像嵌套，但本质是函数调用层级不同，属于合法用法：
--gap: 8px; --container-width: calc(100% - 2 * var(--gap)); /* ✅ 合法 */
但下面这种就容易误判：
--size: 16px; --large-size: calc(var(--size) * 1.25); --border: 1px solid var(--large-size); /* ❌ 错！--large-size 是长度值，不能当颜色用 */
这里不是嵌套问题，而是类型错配：CSS 变量没有类型约束，赋值什么就是什么，var(--large-size) 展开后是 20px，传给 color 就静默失败。
CSS 变量的“嵌套”本质是声明顺序+作用域+类型安全的组合题，不是语法糖能绕过的。最易忽略的是：变量值一旦计算出来就固化，后续修改上游变量不会触发下游重解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
