可行，但仅限在var()的默认值中嵌套引用，变量名位置不支持动态拼接；嵌套展开为单层递归，fallback中可链式使用var()，calc()内变量须为无引号原始值。
直接在 var() 函数里嵌套引用另一个变量可行吗
可行，但有严格限制：只能在 var() 的默认值（第二个参数）中嵌套，不能在变量名位置（第一个参数）里动态拼接或计算。
比如 --primary-color: #3b82f6; 和 --accent-color: var(--primary-color); 是合法的；但 var(--color-prefix-main) 这类“字符串拼接式引用”完全不支持 —— CSS 变量没有运行时求值能力。
- ✅ 正确写法：
--text-emphasis: var(--primary-color, #1e40af); - ❌ 错误写法：
--theme-key: "primary"; --text-emphasis: var(--${theme-key}-color);（语法错误，${}不被解析） - ⚠️ 注意：嵌套只限一层展开。如果
--a: var(--b); --b: var(--c);，最终var(--a)会正确解析为--c的值 —— 浏览器会递归展开，但不会做任何条件判断或 fallback 跳过
fallback 值里用 var() 是最常用的链式场景
当主变量未定义或无效时，fallback 本身可以是另一个变量，形成“备选链”。这在主题切换、深色模式适配中很实用。
例如：
:root {
--bg-base: #ffffff;
--bg-surface: var(--bg-base);
--bg-card: var(--bg-surface, #f9fafb);
--bg-modal: var(--bg-card, #ffffff);
}
这里 --bg-modal 实际依赖三级 fallback 链，但所有中间变量都必须是静态声明的，不能靠 JS 动态生成名。
- ✅ fallback 中的
var(--x)会被完整解析，包括其自身的 fallback - ❌ 不能在 fallback 里写表达式，如
var(--bg-base) + 10px或calc(var(--size) * 2)—— 必须用calc()显式包裹 - ? 小技巧：把通用 fallback 提前声明成“兜底变量”，比如
--fallback-bg: #ffffff;，再统一用var(--user-bg, var(--fallback-bg))
和 calc() 混用时变量展开顺序容易出错
CSS 变量在 calc() 内部必须先被展开，再参与计算。如果变量值本身含单位或表达式，极易因展开时机不对导致无效值。
例如：
:root {
--space-xs: 4px;
--space-sm: calc(var(--space-xs) * 2); /* ✅ 正确：4px * 2 = 8px */
--space-md: calc(var(--space-sm) + 8px); /* ✅ 正确：8px + 8px = 16px */
--invalid: calc(var(--space-xs) + "8px"); /* ❌ 语法错误："4px8px" 不是合法长度 */
}
- ✅ 所有参与
calc()的变量值，必须是可计算的原始值（如4、4px、0.5），不能是带引号的字符串 - ⚠️ 如果变量定义为
--size: "16px";（加了引号），var(--size)展开后就是字符串，calc()会直接报错并丢弃整条声明 - ? 调试建议：用浏览器开发者工具检查 computed 样式，看变量是否已成功展开为具体值，再判断
calc()是否生效
JS 动态设置链式变量要避免循环引用
用 element.style.setProperty('--a', 'var(--b)') 是允许的，但若 JS 同时设置 --b 为 var(--a)，就构成循环依赖 —— 浏览器会静默失败，最终值为初始值或 fallback。
- ✅ 安全做法：JS 只设置终端值（如颜色、尺寸数字），让 CSS 层负责链式引用；或用 JS 计算好最终值再写入
- ❌ 危险操作：
el.style.setProperty('--a', 'var(--b)'); el.style.setProperty('--b', 'var(--a)');—— 无错误提示，但样式不生效 - ? 检查方式：在控制台执行
getComputedStyle(el).getPropertyValue('--a')，若返回空字符串，大概率是链式断裂或循环
CSS 变量的链式逻辑本质是静态文本替换，不是编程语言里的变量引用。真正容易被忽略的是：所有链路必须在声明时就确定路径，运行时无法根据条件切换引用目标 —— 要实现“条件链”，得靠 JS 切换 class 或重设终端变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
