var()的回退值仅在变量完全未声明或显式设为unset/initial时生效；已声明但值非法（如空字符串、语法错误）不会触发回退。
var() 的第二个参数不是“默认值”，而是“回退值”——它只在变量**完全未声明**，或被显式设为 unset / initial 时才生效；只要变量名存在（哪怕值是空字符串、#ffg、; 或语法错误），回退值就不会触发。
var(--x, fallback) 什么时候真正起作用
回退值生效的条件非常严格，不是“变量没值就用 fallback”，而是：
- 变量在当前作用域链中**从未被声明过**（比如没在
:root、.card或任何祖先选择器里写过--x: ...） - 变量被显式设为
--x: unset;或--x: initial;，且该声明已生效（级联优先级足够高） - 变量声明本身是无效 CSS 语法（例如
--x: ;或--x: url(），但注意：这类情况在部分浏览器中可能降级为继承值，而非跳转 fallback
反例：--x: ""、--x: 123px、--x: #ffg 都属于“已声明但值非法”，此时 var(--x, red) 仍会尝试解析左侧值，最终结果可能是 inherit 或属性默认值，不是 red。
content 属性中用 var() 必须手动加引号
content 是少数对值类型敏感的属性，它只接受 <string></string>、<url></url>、attr() 等特定类型。如果变量存的是纯文本，不加引号会直接失效：
- ❌ 错误：
content: var(--tip);（若--tip: help，实际渲染为help；若--tip: 12px，整个声明被忽略） - ✅ 正确：
content: var(--tip, "default");，且确保变量定义也带引号：--tip: "Click me"; - ⚠️ JS 设置时注意转义：
el.style.setProperty('--tip', JSON.stringify("Don't click"));
嵌套 var() 回退链要控制深度
回退值支持嵌套 var()，适合构建主题降级策略，但容易误用：
- ✅ 推荐写法：
background-color: var(--bg-primary, var(--bg-base, #fff)); - ⚠️ 深度陷阱：超过两层（如
var(--a, var(--b, var(--c, #000)))）会让调试变得困难，且每个var()独立求值，无法缓存中间结果 - ❌ 绝对禁止：
var(--x, var(--x, ...))—— 自引用会导致 CSS 解析失败，整条声明被丢弃 - ? 提示：回退链中每个变量名都必须真实存在或明确未定义，否则链会在第一个“已声明但非法”的环节中断，不再往下查
JS 读取时 fallback 完全不参与计算
这是最常被忽略的边界：浏览器开发者工具里看到的 computed value 是样式计算后的结果，而 getComputedStyle(el).getPropertyValue('--x') 返回的是变量原始声明值（包括空字符串、unset 等），不会执行任何 fallback 逻辑。
- 如果你靠 JS 检测
--x是否为空来决定是否补默认值，得手动判断：if (val === '' || val === 'unset') { ... } - 想让 JS 行为和 CSS 渲染一致？别依赖 fallback，改用
el.style.setProperty('--x', val || '16px');显式修正 - ⚠️ 注意：伪类（如
:root）中声明了空值--size: ;，所有后代元素的var(--size, 16px)都会跳过 fallback —— 因为变量“存在”了
回退值语义窄、触发条件苛刻，它解决不了“变量存在但为空/非法”的问题。真要兜底，得靠 JS 主动校验，或者从源头杜绝空声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
