var()函数的第二个参数是回退值而非默认值，仅在变量未定义或语法无效时生效；若已定义为空字符串、unset或initial，则仍使用该值，不会回退。
var() 函数的第二个参数到底是不是“默认值”
不是严格意义上的“默认值”，而是var()在找不到第一个参数定义时的回退值（fallback）。它不会覆盖已定义但值为 unset、initial 或空字符串的 Custom Property，也不会触发级联计算——它只是字面量替换的兜底文本。
常见误解是认为写成 var(--color, red) 就能“自动补缺”，结果发现变量明明没声明却没生效，往往是因为父级作用域里意外定义了 --color: ;（空值）或 --color: initial，导致回退不触发。
- 回退只发生在 CSS 属性解析阶段查不到该自定义属性（即
getPropertyValue('--color') === ''且无继承链上的定义） - 第二个参数支持任何合法的 CSS 值：颜色、长度、甚至另一个
var(--size, 1rem)（可嵌套） - 不能是 CSS 函数调用如
calc()的顶层表达式，但可以写成var(--gap, calc(1em + 2px))
什么时候回退值会静默失效
最常踩的坑是变量被声明但值为空或非法，比如：
:root {
--bg: ;
--text: initial;
--size: 16px;
}
.box { background: var(--bg, #fff); } /* 不会回退，渲染为 transparent */
.text { color: var(--text, #333); } /* 不会回退，color 变成 initial（通常是 black）*/
.font { font-size: var(--size, 14px); } /* 正常回退？不，--size 已定义，所以用 16px，不进 fallback */
关键判断依据：浏览器是否在 computed style 中显示该变量为 invalid 或空。可用 getComputedStyle(el).getPropertyValue('--bg') 在控制台验证。
- 声明但未赋值：
--x: ;→ 回退触发 - 赋值为
initial/inherit/unset→ 不触发回退，按 CSS 继承规则处理 - 赋值为非法值（如
--color: redx;）→ 当前作用域内视为未定义，回退触发 - 变量名拼错（
--colr）→ 回退触发
嵌套 var() 回退与性能注意点
允许在 fallback 里再写 var()，形成多层降级，例如：
.btn {
--btn-bg: var(--primary-bg, var(--theme-bg, #007bff));
background-color: var(--btn-bg);
}
这种写法语义清晰，但要注意两点：
- 每一层
var()都是独立查找，不会缓存中间结果；深层嵌套（>3 层）可能略微拖慢样式计算，尤其在大量元素上批量使用时 - 若
--theme-bg本身也带 fallback，整个链路仍只走一次查找逻辑，不会递归展开所有可能性 - 构建工具（如 PostCSS）一般不解析这类嵌套 fallback，无法做静态替换，必须靠运行时
用 JavaScript 动态检测并补全缺失变量
纯 CSS 无法“主动初始化”未声明的 Custom Property，但 JS 可以在 :root 上批量检查并注入默认值：
const defaults = {
'--color-text': '#333',
'--space-md': '1rem',
'--radius-sm': '4px'
};
Object.entries(defaults).forEach(([prop, val]) => {
if (!getComputedStyle(document.documentElement).getPropertyValue(prop)) {
document.documentElement.style.setProperty(prop, val);
}
});
这比依赖 CSS fallback 更可靠，尤其适合主题切换场景。但要注意：JS 注入时机必须早于首次样式计算（建议放在 内 script 或 document.documentElement ready 后立即执行）。
真正容易被忽略的是：CSS 自定义属性的继承行为和作用域隔离性。一个组件内部 var(--x, red) 的 fallback 生效与否，取决于它向上最近的、声明了 --x 的祖先元素——而不是全局有没有 :root 定义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
