var()函数的第二个参数是标准语法中的回退值，用于变量未声明时提供默认值；空字符串不触发回退，仅null表示未定义；回退值不解析嵌套var()且不可含calc()，但可前置计算；@supports检测不可靠。
var() 函数的第二个参数就是回退值，不是“额外技巧”而是标准语法
CSS 变量本身不支持直接定义默认值（比如 --color: #000 里写不了“如果没定义就用 #333”），但 var() 函数从一开始就把回退值作为必选的第二参数设计进去了——它不是 polyfill 或 hack，是规范原生能力。
常见错误是只传一个参数：color: var(--text-color)，一旦 --text-color 未声明或值为空，就会退到浏览器默认（通常是黑色），且毫无提示。更糟的是，这种失败静默发生，连 DevTools 都不报错。
- 回退值可以是任意合法 CSS 值：
var(--bg, white)、var(--gap, 1rem)、var(--shadow, 0 2px 4px rgba(0,0,0,.1)) - 回退值里也能嵌套
var()：var(--primary, var(--fallback-color, #007bff))，形成多级降级 - 注意：回退值**不参与变量作用域查找**，它只是字面量，不会再去尝试解析里面的变量名
回退值在自定义属性未定义时才生效，空字符串不算“未定义”
这是最容易踩的坑：很多人把 --size: "" 当作“清空变量”，以为这样能触发回退，但其实只要属性被声明了（哪怕值为空），var(--size, 16px) 就会取那个空字符串，导致样式崩坏（例如 font-size: "" 被忽略，退成浏览器默认大小）。
使用场景上，这常出现在组件库中预设变量但允许用户覆盖的场景——你不能依赖“用户没设就自动 fallback”，而要确保用户真的没声明该变量。
- 检查是否真未定义：
getComputedStyle(el).getPropertyValue('--foo')返回空字符串""表示已声明但为空；返回null才是未定义 - 避免空值污染：在 :root 或组件根上慎用
--x: ""这类初始化，不如干脆不声明 - 构建时可加 lint 规则，禁止对关键变量赋空字符串字面量
回退值不支持计算或函数调用，但可用 calc() 包裹实现间接计算
var() 的第二个参数只接受“最终值”，不能写 var(--base, calc(var(--base-unit) * 2)) ——这会直接报错（Invalid property value）。但你可以把计算逻辑前置，用另一个变量承载结果。
典型场景是响应式字号系统：你想让 --h1-size 在无定义时等于 --base-font-size 的两倍，但又不想硬编码像素值。
- ✅ 正确做法：先定义计算好的后备变量：
--h1-size-fallback: calc(var(--base-font-size, 16px) * 2)，再用var(--h1-size, var(--h1-size-fallback)) - ❌ 错误写法：
var(--h1-size, calc(var(--base-font-size) * 2))——var(--base-font-size)在回退上下文中不被解析 - 性能影响极小，但嵌套过深（如三层 var + calc）可能增加 CSS 解析开销，建议控制在两层内
在 @supports 中检测 var() 回退行为不可靠，别用来做功能探测
有人想用 @supports (color: var(--x, red)) 判断浏览器是否支持回退语法，但所有支持 var() 的浏览器（Chrome 49+、Firefox 31+、Safari 9.1+）都支持第二个参数，这个检测既没必要，也不准确——因为 @supports 对含回退的 var() 解析行为不一致，Safari 甚至会直接忽略整条规则。
真正需要兼容的其实是 IE：它完全不支持 var()，所以回退值机制对你没意义。这时候该用传统降级（先写固定值，再覆盖 var()）。
- 正确兼容写法：
color: #333;<br>color: var(--text-color, #333);
- 不要写：
@supports (color: var(--x, #000)) { color: var(--text-color, #333); } - 构建工具中可配置 postcss-custom-properties 插件自动补全降级，比手写更可靠
回退值机制看着简单，但它的触发条件（未声明 ≠ 空值）、嵌套限制（不能在回退值里再写 var()）、以及和 @supports 的错位，都是线上样式异常的隐性源头。用之前，先用 getComputedStyle 确认变量状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
