var()的第二个参数是回退值，仅在变量完全未声明或显式设为unset时生效；已声明为空字符串、initial、inherit或非法值均不触发回退，这是CSS规范行为而非bug。
var() 的第二个参数不是默认值，是回退值
它只在 --my-var 完全未声明，或被显式设为 unset 时才生效；已声明为空字符串 ""、initial、inherit 或非法值（如 bluue）均不触发回退。这不是浏览器 bug，而是规范行为。
常见错误现象：:root { --color: ""; } 后写 color: var(--color, #000);，结果文字透明——因为取到了空字符串，该声明被浏览器忽略，最终降级为 inherit，而非跳到 #000。
验证方式：用 getComputedStyle(el).getPropertyValue('--color') 检查返回值。若为 ""，说明变量已定义但为空；只有返回 "" 且该变量在任何作用域都未出现过，才代表“真未定义”。
多级回退必须用嵌套 var()，但不能循环引用
回退值本身可以是另一个 var()，形成降级链，适合主题系统：
立即学习“前端免费学习笔记（深入）”；
body {
background-color: var(--bg-color, var(--fallback-bg, #fff));
}
执行顺序：先查 --bg-color → 未定义则查 --fallback-bg → 再未定义才用 #fff。
- 嵌套建议不超过两层，最内层必须是字面量（如
#000、1rem） - 禁止循环引用，例如
var(--a, var(--b, var(--a, black)))会静默失效 - 回退值中不能写
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', 'unset')—— 更可靠，但注意 IE 和部分旧 Android WebView 不支持unset
更稳妥的实践是：在 JS 中主动兜底，避免传空：el.style.setProperty('--size', size || '16px')。
别把 CSS 变量回退和 Sass/Less 的 !default 混为一谈
$primary: #1890ff !default（Sass）或 @primary: #1890ff !default（Less）只在编译期起作用，对运行时的 var(--primary, #000) 完全无感。两者生命周期、作用域、生效时机都不同。
典型误用：$--primary: #000 !default 是非法写法（SCSS 变量不支持 -- 前缀），且无法影响任何 var() 行为。
真正需要运行时可配置，默认值必须落在 var() 调用处，而不是变量声明处。变量声明本身不支持“自带默认值”。
unset。跨组件、跨主题、服务端渲染时，漏掉一次声明，就是一次真·未定义。 
