var() 是 css 函数而非 javascript 函数，正确写法为 var(--name, fallback)，回退值在变量未定义或无效时生效，但 js 读取时不触发回退逻辑。
var() 函数的正确写法和回退值语法
var() 不是 JavaScript 函数，而是 CSS 原生函数，必须在 CSS 属性值中使用。它的基本形式是 var(--my-var, fallback-value)，括号内第一个参数是自定义属性名（必须以 -- 开头），第二个参数是可选的回退值，仅在变量未定义或无效时生效。
常见错误是把回退值写成字符串但没加引号（比如写成 var(--color, red) 是对的，但 var(--color, #ff0000px) 这种非法值会导致整个声明被忽略）；另一个典型问题是把变量名写错，比如漏掉 -- 或拼错大小写——CSS 变量名区分大小写，--Color 和 --color 是两个不同变量。
回退值能用哪些类型？哪些不能用？
回退值可以是任何合法的 CSS 值：颜色、长度、数字、关键字（如 auto、normal）、甚至另一个 var() 函数（支持嵌套回退）。但不能是不完整声明，比如不能写 var(--size, 12px 16px)（缺少属性上下文），也不能在非计算型属性里塞函数式值（如 content: var(--text, "hello") 中的 "hello" 必须加引号）。
- ✅ 正确：
background-color: var(--bg, #f0f0f0); - ✅ 正确：
font-size: var(--fs, clamp(1rem, 2.5vw, 1.25rem)); - ✅ 正确：
margin: var(--m, var(--default-m, 0.5rem)); - ❌ 错误：
width: var(--w, 100% !important);（!important在回退值中无效且会破坏解析） - ❌ 错误：
color: var(--c, rgba(0,0,0,);（语法错误，括号不匹配，整个var()失效）
变量未定义时，回退值不生效的几种情况
看起来写了回退值却没效果，往往不是语法问题，而是变量“被定义了但值非法”。例如在 :root 中写了 --color: ; 或 --color: none;，此时变量存在但值无效，var(--color, red) 仍会尝试使用该无效值，最终降级为属性默认值（如 color 的默认是 inherit），而不是你写的 red。
验证方式很简单：打开浏览器开发者工具，在 Elements 面板中找到对应元素，看该 CSS 属性是否被划掉（表示被忽略），再点开变量定义处确认值是否真实有效。
- 确保变量在作用域内已声明，比如在
:root或父元素上用了style="--x: value;" - 避免空格或分号污染值：
--size: 12 px;中的空格会让解析失败，应写成--size: 12px; - 媒体查询中动态设置变量时，要确认当前断点下变量确实被赋值
JavaScript 动态读写 CSS 变量时回退值不参与计算
用 getComputedStyle(el).getPropertyValue('--color') 获取变量值时，返回的是变量实际存储的字符串（包括空值或非法值），**不会自动触发回退逻辑**。也就是说，JS 里读不到 var(--color, blue) 中的 blue，它只存在于 CSS 渲染引擎的计算阶段。
如果需要 JS 侧兜底，得自己实现判断：
const el = document.querySelector('.box');
const computed = getComputedStyle(el);
const color = computed.getPropertyValue('--color').trim();
const finalColor = color ? color : 'blue'; // 手动回退
同理，用 el.style.setProperty('--color', '') 清空变量后，CSS 中的 var(--color, red) 会因变量值为空而失效，最终采用回退值——但 JS 无法“触发”这个回退，只是 CSS 引擎在样式计算时自然处理。
最易被忽略的一点：回退值只在 CSS 层面起作用，它不改变变量本身的值，也不影响 JS 读取结果。如果你依赖 JS 读取来同步状态，必须单独维护 fallback 逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
