CSS变量如何设置默认回退值_var函数的第二个参数使用技巧

var() 的第二个参数是“回退值”，仅在变量未定义或语法无效时生效；若已定义为空字符串、unset 或 initial，则仍使用该值，不会回退。

var() 函数第二个参数不是“默认值”，而是“回退值”

很多人误以为 var(--color, red) 里的 red 是“默认值”，其实它只在 --color **未定义或语法无效**时生效。注意：如果变量已定义但值为空字符串、unset 或 initial，它仍会使用该变量值，不会回退。

常见错误现象：
– 定义了 :root { --text-color: ""; }，但 color: var(--text-color, #333); 仍渲染成透明文字（空字符串被接受）
– 使用 var(--size, 1rem)，但组件库覆盖了 --size 为 invalid-value，此时回退才触发

• 回退值支持任意合法 CSS 值：颜色、长度、甚至另一个 var()（如 var(--bg, var(--fallback-bg, #fff))）
• 回退值中不能包含逗号（否则会被截断），想写 rgba(0,0,0,0.5) 没问题，但 1px solid, red 会出错
• 嵌套 var() 回退是安全的，浏览器按顺序解析，不会无限递归

用 calc() + var() 实现“条件性回退”

CSS 本身没有 if 判断，但可通过 calc() 配合变量控制是否启用回退逻辑。典型场景：当主题色未设置时，自动 fallback 到 light/dark 模式适配值。

例如：

立即学习“前端免费学习笔记（深入）”；

body {  --primary: var(--theme-primary);  --primary-fallback: #007bff;  --primary-safe: calc((1 * var(--primary, 0)) + var(--primary-fallback));}

这招本质是利用 calc() 对无效值报错后降级到回退值的特性——但更稳的方式是直接用两层 var()：

.btn {  background: var(--btn-bg, var(--primary, #007bff));}

• 第一层 var(--btn-bg, ...) 尝试读取组件级变量
• 第二层 var(--primary, #007bff) 是主题级兜底
• 这种链式写法比 calc() 更可读、更兼容（IE 不支持 calc() 中嵌套 var()）

动态 JS 设置变量时，回退值不自动刷新

用 element.style.setProperty('--color', '') 清空变量，CSS 不会立刻切到回退值——因为 '' 是合法空字符串，不是“未定义”。只有删掉变量或设为无效值（如 'not-a-color'）才会触发回退。

• 正确清空并触发回退：element.style.removeProperty('--color')
• 或设为无效值：element.style.setProperty('--color', 'invalid')（需确保该值在目标属性上下文中非法，如 color: invalid 会失败）
• 用 getComputedStyle(el).getPropertyValue('--color') 检查时，返回空字符串 ≠ 变量未定义，要结合 getPropertyValue 是否为 '' 和是否在 :root 中声明来综合判断

回退值在 @media 或 :is() 中的行为差异

回退值本身不响应媒体查询变化，但变量可以。容易忽略的是：当变量定义在 @media 块内，而 var() 在外层使用，回退值仅在变量完全不可用时生效，不参与媒体查询匹配逻辑。

例如：

立即学习“前端免费学习笔记（深入）”；

:root { --gap: 8px; }@media (min-width: 768px) {  :root { --gap: 16px; }}.card { margin: var(--gap, 12px); }

在小屏下 --gap 是 8px，大屏下是 16px，12px 永远不会用到——除非你把 :root 中的 --gap 删掉。

• 回退值是静态的，无法通过 @media 切换
• 若需响应式回退，得手动在每个媒体查询里重复写 var(--gap, 12px) 并配合不同变量名
• :is(.dark, .light) { --text: var(--text-dark, #000); } 这种写法中，回退值也不受 :is() 影响，只看 --text-dark 是否存在

回退值看着简单，真正难的是判断“变量到底算不算有效”——浏览器对空字符串、inherit、自定义语法错误的处理各不相同，建议在关键路径上用 DevTools 的 Computed 面板逐层验证实际取值。