var()的fallback仅在变量未定义或值为unset时生效，空字符串、inherit、0等合法值不会触发；fallback必须是静态字面量，禁止嵌套var或calc，动态fallback需通过继承链和多变量协作实现。
var() 函数本身不支持直接写默认值语法
很多人以为 var(--color, #000) 是 CSS 原生语法里的“默认值 fallback”，其实这是错觉——var() 的第二个参数确实是 fallback，但它只在变量**未定义或为空值**时生效，不是“兜底逻辑”，更不是运行时计算的默认值。比如 --color: ;（空字符串）或 --color: initial; 都会触发 fallback，但 --color: transparent; 不会，哪怕你主观上觉得它“等价于没设”。
fallback 参数只能是声明期静态值，不能嵌套 var 或 calc
这个限制常被忽略：fallback 必须是合法的 CSS 值字面量，不能含函数调用。下面这些写法都**非法**：
var(--bg, var(--fallback-color)) ← 报错：嵌套 var 不允许 var(--size, calc(1rem * 2)) ← 报错：calc 不被接受为 fallback var(--theme, 'light') ← 报错：引号包围的字符串不是合法颜色/长度值
正确 fallback 示例：var(--radius, 4px)、var(--opacity, 0.7)、var(--shadow, 0 2px 4px rgba(0,0,0,0.1))。
变量未定义时 fallback 生效，但定义了空值仍可能失效
以下情况 fallback **不会触发**，容易误判：
-
:root { --color: ; }→ 空值声明仍算“已定义”，var(--color, red)解析为;，导致整条声明无效（浏览器跳过该属性） -
.box { --color: inherit; }→inherit是有效值，即使父元素没该属性，也不会回退到 fallback -
:root { --size: 0; }→0是合法长度，var(--size, 16px)就真用0，不会取16px
真正触发 fallback 的典型场景只有两个：--x 根本没在任何作用域中声明过；或声明了但值是 unset（且该属性支持 unset 语义）。
需要动态 fallback？得靠层叠 + 自定义属性继承链
如果想实现“某组件没传 --color 就用父级的，父级也没有就用全局默认”，不能靠 var(--color, var(--color-fallback))（非法），而要利用 CSS 继承和作用域覆盖：
:root {
--color-fallback: #333;
}
.card {
--color: var(--color-fallback); /* 默认继承全局 fallback */
}
.card.primary {
--color: #007bff; /* 显式覆盖 */
}
.card {
color: var(--color); /* 此处始终有值 */
}
关键点：把 fallback 值存成另一个变量，再在需要的地方用 var() 显式赋值给目标变量，而不是试图在单个 var() 调用里塞逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
