var()的第二个参数是回退值，仅在变量完全未声明或设为unset时生效；空字符串、initial、inherit或非法值均不触发回退，且回退值中禁止嵌套var()。
var() 的第二个参数不是“默认值”，而是仅在变量完全未声明或被设为 unset 时才生效的回退值；它不兜底空字符串、initial、inherit 或非法值。
为什么 var(--color, red) 有时不生效
常见错误现象：明明写了回退色，元素却透明、无背景、文字消失。这不是浏览器 bug，而是变量状态被误判了。
-
--color: ""（空字符串）→ 不触发回退，color解析为无效值，最终降级为inherit或initial -
--color: initial→ 显式重置，不走回退，color变成inherit（文本继承父级颜色） -
--color: bluue（拼错）→ 合法声明但值非法，浏览器继续解析失败，仍不触发回退 -
--color: unset→ ✅ 唯一能稳定触发red回退的写法之一
哪些值能真正触发回退
只有两种情况会让 var(--x, #000) 中的 #000 生效：
-
--x在整个样式表中从未被声明过（包括:root、任何选择器、内联style） -
--x被显式设为unset（如div { --x: unset; }）
注意：element.style.removeProperty('--x') 会移除内联声明，但若 --x 在 :root 已定义，依然不会触发回退。
回退值里能写什么、不能写什么
回退值必须是当前 CSS 属性上下文中的合法字面量或函数调用，且禁止嵌套 var()。
- ✅ 允许：
var(--size, calc(1rem + 2px))、var(--bg, linear-gradient(to right, #f00, #00f)) - ❌ 非法：
var(--color, var(--fallback))（语法错误，整条声明被忽略） - ⚠️ 危险：
var(--theme, #fff)看似安全，但如果--theme被设为transparent，回退根本不会启动，背景就真透明了
真正强兜底的做法，是用该属性最保守的合法值：比如 border 用 1px solid #ddd，而不是 var(--border, none) —— 因为 none 是合法值，不会触发回退，反而让边框彻底消失。
调试时怎么确认变量是否“真未定义”
别信 DevTools Styles 面板里看到的“--x: …”有没有显示，要实测计算结果：
- 用
getComputedStyle(el).getPropertyValue('--x')检查，返回""≠ 未定义（可能只是空字符串） - 配合
window.getComputedStyle(el).color看最终生效值，才是真实渲染结果 - 在 Computed 面板里点开对应属性，看 “Computed value” 是不是你写的回退值 —— 这才是唯一可信信号
最容易被忽略的一点：回退值不继承、不链式查找、不感知组件局部作用域。你在按钮里设了 --btn-color: blue，但全局 color: var(--text-color, black) 里的 black 不会因为你这个按钮的设置而改变 —— 它只看你有没有在祖先链上声明过 --text-color。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
