var() 的第二个参数是回退值而非默认值，仅在变量未声明或为 unset/initial 时生效；多级嵌套需用合法 css 值，最内层必须为字面量，且需防循环引用。
var() 的第二个参数不是“默认值”，而是“回退值”
很多人写 color: var(--text-color, #333) 时，以为只要 --text-color 没被赋值，就会自动用 #333。但实际规则更严格：只有当变量**完全未声明**，或被显式设为 unset（或 initial）时，回退才生效。一旦变量被声明过——哪怕值是空字符串 --text-color: ""、拼错的颜色 --text-color: #ffg、甚至 --text-color: url()——浏览器仍会尝试解析该值，此时回退值被忽略，样式可能静默失效。
多级嵌套必须用合法 CSS 值，不能直接传变量名
想实现“组件级 → 主题级 → 全局级”三级 fallback，不能写成 var(--btn-color, --theme-color)——这是非法语法，整条 CSS 声明会被浏览器丢弃。正确写法是让第二参数本身就是一个可求值的表达式：
-
color: var(--btn-color, var(--theme-color, #007bff));✅ 合法：内层var()是完整值 -
color: var(--btn-color, var(--theme-color));❌ 错误：内层没 fallback，整个var(--theme-color)不是合法 CSS 值 -
background: var(--bg, var(--surface, var(--base, #fff)));⚠️ 可行但不推荐：三层嵌套调试困难，且旧版 Safari 对嵌套 +calc()组合支持不稳定
嵌套层级要防循环引用，最内层必须是字面量
浏览器不检测变量引用循环，但运行时会报错。比如：
:root {
--a: var(--b, red);
--b: var(--a, blue);
}
Chrome 会提示 CSS Parser: cycle detected in variable reference，整段样式失效。安全做法是：
- 嵌套最多两层，例如
var(--x, var(--y, black)) - 最内层 fallback 必须是字面量（
#000、1rem、normal），不能是另一个var() - 避免在回退值里混用
calc()或rgba()：部分 iOS Safari 15.6 会静默跳过整条声明
回退链不解决作用域问题，得靠定义位置兜底
写 var(--primary, var(--accent, #007bff)) 并不能让子组件“自动继承”父组件定义的 --accent。如果父组件没定义 --accent，而子组件又没在自身作用域里定义它，那最终 fallback 到 #007bff 是静默发生的——你很难从 DevTools 里看出哪一层缺失了变量。真正可控的做法是：
- 全局变量统一在
:root定义基础 fallback，如--accent: #007bff; - 组件级变量只覆盖必要项，其余依赖继承，不依赖回退链补漏
- 用
getComputedStyle(el).getPropertyValue('--accent')在控制台验证值是否真的为空字符串或未定义，而不是靠颜色“看起来像”来判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
