css变量本身不支持定义时自带默认值，但可通过var(--a, var(--b, #000))实现多级回退；该语法合法且原生支持，因第二个参数必须是合法css值，而var(--b, #000)是可求值表达式，--b仅为属性名故非法。
直接说结论：CSS变量本身不支持“定义时自带默认值”，但通过var()函数的第二个参数嵌套另一个var()，就能实现多级回退——这是浏览器原生支持的合法语法，不是 hack。
为什么var(--a, var(--b, #000))能生效，而var(--a, --b)不行
因为var()的第二个参数必须是**一个合法的 CSS 值**，而--b只是一个自定义属性名，不是值；但var(--b, #000)本身就是一个完整、可求值的 CSS 表达式，浏览器在解析回退值时会把它当作字面量表达式去尝试计算（只要语法合法）。
- ✅ 合法：
var(--bg, var(--theme-bg, #fff))、var(--color, var(--fallback-color, rgba(0,0,0,0.7))) - ❌ 非法：
var(--bg, --theme-bg)（第二个参数不是值）、var(--x, var(--y))（缺少回退值，语法不完整） - ⚠️ 注意：
var(--a, var(--b, var(--c, #000)))可以三层嵌套，但不能形成循环引用，比如--a: var(--b, red); --b: var(--a, blue)会导致整个声明被忽略
空字符串、initial、unset不会触发任何一级或多级回退
这是最常误判的点：回退只在变量**完全未声明**（或声明为空白--x: ;）时才启动。一旦你写了--size: ""或--color: initial，浏览器就认为该变量“已定义”，后续所有var()调用都会取这个值，根本不会往下走回退链。
- 例如：
:root { --bg: ""; } .box { background: var(--bg, var(--fallback, #fff)); }→ 实际渲染为透明背景（""被当作有效值，不触发回退） - 验证方式：在控制台运行
getComputedStyle(document.documentElement).getPropertyValue('--bg')，若返回""，说明已定义，回退失效 - 正确清空策略：要么删掉那行声明，要么显式设为
unset并接受其继承行为，而不是指望回退兜底
回退链中的变量作用域是独立的，不继承外部上下文
var(--a, var(--b, #000))里的--b是在**当前选择器的作用域内查找**的，不会自动向上搜索父组件或:root里有没有定义它。如果--b在当前作用域没定义，才会触发它的回退值。
- 常见陷阱：
.card { --a: red; background: var(--a, var(--b, #fff)); }—— 这里--b未定义，所以回退到#fff；但如果在.card里也写了--b: blue，那就会用blue，哪怕:root里另有--b: green - 想让组件复用全局 fallback？得把 fallback 变量统一提至
:root，或用 JS 动态注入，CSS 本身不提供“跨作用域 fallback 查找”机制 - 性能无负担，但调试成本高：嵌套越深，越难一眼看出最终取的是哪一层的值
真正容易被忽略的不是语法怎么写，而是「变量是否真的未定义」这个前提——绝大多数回退失效，都卡在你以为它没定义，其实它被某个重置规则、框架默认样式、甚至空格拼错的--var-name 悄悄声明了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
