var()的第二个参数是回退值，仅在变量完全未声明或设为unset时生效；已声明为空字符串、initial、非法值等均不触发回退，且支持嵌套var()实现多级降级，但需避免循环引用和过度嵌套。
直接用 var() 的第二个参数，不是给变量“设默认值”，而是给每次引用加回退——它只在变量完全未声明，或被设为 unset 时生效；变量已声明但值为空字符串、initial、非法颜色等，都不会触发回退。
为什么 var(--color, #000) 有时不生效？
最常踩的坑是误以为“变量没赋值 = 未定义”。实际上：
-
:root { --color: ""; }→var(--color, #000)返回空字符串，样式被丢弃，不回退 -
:root { --color: initial; }→ 值按 CSS 继承规则处理（比如color变成inherit），不进回退 -
:root { --color: bluue; }（拼错）→ 浏览器解析失败，视为未定义，此时才触发回退 - 验证方式：用
getComputedStyle(el).getPropertyValue('--color')看返回是否为""或"bluue"
怎么写多级回退才安全？
回退值本身支持嵌套 var()，但必须确保语法合法、无循环引用：
- ✅ 安全写法：
background-color: var(--bg-primary, var(--bg-base, #fff)); - ❌ 危险写法：
var(--a, var(--b, var(--a, black)))→ Chrome 报CSS Parser: cycle detected in variable reference - 嵌套建议不超过两层，最内层必须是字面量（如
#000、1rem） - 别在回退值里写
calc(var(--x))或rgba(var(--r), ...)—— 部分旧 Safari 会静默失效
JS 动态设置变量时，回退为什么不自动切换？
浏览器不会监听变量值变化后重新触发回退逻辑。例如：
-
el.style.setProperty('--size', '')→font-size: var(--size, 16px)仍取空字符串，不跳到16px -
el.style.removeProperty('--size')→ 才真正“未声明”，回退生效 - 更稳妥的做法：
el.style.setProperty('--size', size || '16px')，避免传空 - 如果必须清空并触发回退，用
el.style.setProperty('--size', 'unset')（注意兼容性）
回退机制本身开销极小，但真正容易被忽略的是语义混淆：把 var(--x, red) 当作业务层“默认值”硬编码在 CSS 里，结果 JS 后续设了 --x: ""，样式却意外失效——这不是回退坏了，是你没意识到“已声明”和“未声明”之间那条看不见的线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
