var()的第二个参数是回退值而非默认值，仅在变量已声明但值为空、无效或解析失败时生效；若变量完全未声明，回退值也生效，但这是唯一兜底机会。
var() 的第二个参数不是“默认值”，而是“回退值”
很多人误以为 var(--color, red) 中的 red 是当变量未定义时的“默认值”，其实它只是在 --color **被定义但值为空、无效或解析失败**时才启用。如果 --color 根本没在任何作用域中声明过，var() 仍会尝试计算，但此时回退值才真正生效。关键区别在于：未声明 ≠ 声明为空字符串。
常见错误现象：:root { --bg: ; } 后使用 background: var(--bg, #fff);，结果背景透明（而非白色）——因空字符串是“已声明但无效值”，CSS 会丢弃整个声明，不触发回退。
- 回退值只在变量存在但值非法时起作用（如
--size: 12;缺单位） - 变量完全未声明时，回退值也生效，但这是唯一“兜底”机会
- 回退值本身可嵌套
var()，例如var(--primary, var(--fallback, #000))
嵌套 var() 回退链要防循环引用
写 var(--a, var(--b, var(--a, black))) 看似多层保险，实则危险：若 --a 和 --b 都未定义，浏览器会尝试解析第三层 var(--a, ...)，再次触发对 --a 的查找，最终报错或静默失效。Chrome 会抛出 CSS Parser: cycle detected in variable reference 类似警告。
- 回退链建议不超过两层，且确保最内层是字面量（如
#000、1rem） - 避免用同一变量名在不同层级互相引用
- 调试时可在 DevTools 的 Computed 面板里看最终计算值，若显示
invalid或空白，说明回退未命中
在媒体查询或组件作用域中覆盖变量需同步更新回退逻辑
比如按钮组件设了 .btn { --btn-color: var(--primary, blue); }，然后在暗色模式下想覆盖为灰色：@media (prefers-color-scheme: dark) { :root { --primary: ; } }——这会导致 --btn-color 变成 blue（回退生效），但可能不符合设计预期。更稳妥的是显式重置变量值，而非留空。
- 覆盖变量时，优先赋一个有效值（如
--primary: gray;），而不是删掉或置空 - 若确实需要“取消继承”，用
unset或initial（注意兼容性），它们属于合法 CSS 值，能正常触发回退 - 组件级变量建议带命名空间前缀（如
--btn-bg），降低全局污染和回退冲突概率
回退值不支持 CSS 函数或表达式
var(--gap, calc(1rem + 2px)) 是合法的，但 var(--gap, clamp(1rem, 3vw, 2rem)) 在部分旧版 Safari 中会失败；更隐蔽的是 var(--color, rgb(var(--r), var(--g), var(--b))) —— 回退值里的 var() 不会被解析，整段当作无效值丢弃。
- 回退值仅支持字面量、基础函数（
calc()、rgb()、hsl()等）和单位数值 - 避免在回退值里写复杂逻辑，尤其跨浏览器项目中，优先用简单颜色、尺寸等确定值
- 若需动态计算，应把逻辑移到变量定义侧（如
--gap: calc(1rem + 2px);），而非塞进回退参数
回退值看着简单，但它生效的前提是“变量已进入计算流程”，而这个流程受声明位置、值有效性、嵌套深度多重影响。实际项目里，最常被忽略的是：你以为删掉一个变量声明就能触发回退，结果发现它被父元素的同名变量悄悄继承了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
