var()函数的第二个参数是回退值，仅在变量未声明或语法无效时生效；它必须是合法css值、不加引号、不可嵌套var()，且逗号后多值会导致声明失效。
var() 函数的语法和回退值写法
var() 必须写在 CSS 声明值位置，不能用在选择器、@media 条件或属性名里。回退值不是可选参数，而是紧跟在变量名后的**第一个合法 CSS 值**，用逗号分隔，且只支持单层回退（不支持嵌套 var()）。
常见错误是把回退值写成字符串字面量（如 "#ccc"），实际应去掉引号；或者误以为能写多个备选，比如 var(--color, #000, #333) —— 这会直接导致整个声明无效。
-
color: var(--text-color, #333);✅ 正确：回退为十六进制色值 -
background: var(--bg, linear-gradient(to right, red, blue));✅ 正确：回退值可以是复杂函数 -
font-size: var(--size, 1rem, 16px);❌ 错误：逗号后多出一个值，声明被浏览器忽略 -
border: var(--border, "2px solid #eee");❌ 错误：带引号的字符串不被解析为 border 值
自定义属性未定义时回退值才生效
回退值仅在 --xxx 根本没被声明，或声明值**语法非法**（如 --size: 12; without unit）时触发。如果变量存在但值为空、为 initial 或 unset，var() 仍会尝试计算，不会降级到回退值。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
例如：:root { --gap: ; }（空值）或 --gap: auto;（类型不匹配于期望的长度）都可能导致布局异常，而非自动使用 var(--gap, 1rem) 中的 1rem。
- 检查变量是否真的被定义：用浏览器开发者工具的“Computed”面板看
var(--x)解析结果，若显示invalid才说明回退启用 - 避免在 :root 外层覆盖变量时漏写单位，比如
.card { --size: 12; }→ 应为--size: 12px; - 回退值不能依赖其他变量，
var(--c, var(--fallback))是无效语法
在 media query 或 JavaScript 中读取时回退值不参与计算
CSS var() 的回退机制纯属渲染时行为，JS 通过 getComputedStyle(el).getPropertyValue('--x') 只能读到变量原始值（或空字符串），**永远读不到回退值**。同理，@media (prefers-color-scheme: dark) 里修改变量后，已用 var(--x, #fff) 的元素会重绘，但 JS 无法感知这个“生效值”来自变量还是回退。
- 需要 JS 动态判断主题时，不要依赖
var()回退逻辑，而应显式设置变量：document.documentElement.style.setProperty('--text', isDark ? '#eee' : '#222'); - 媒体查询中修改变量，要确保所有相关 CSS 规则都基于该变量，否则回退值可能在切换时短暂暴露（比如暗色模式刚加载时，变量尚未注入，先显示回退色）
- 构建工具（如 PostCSS）无法静态解析
var()回退值，所以 CSS 压缩或变量内联时，回退值会被原样保留，不参与替换
IE 不支持 var()，回退值也不能挽救兼容性
Internet Explorer 完全不认识 var() 语法，遇到 color: var(--c, #000); 会直接忽略整条声明，**连回退值都不认**。这意味着你必须为 IE 单独提供降级样式，不能指望回退值兜底。
- 写法上采用“先写静态值，再覆盖为 var()”：
button { color: #333; color: var(--btn-color, #333); }IE 读到第一行就停，现代浏览器覆盖第二行 - 不要把关键样式（如字体大小、布局尺寸）完全交给
var()+ 回退，尤其当回退值本身也依赖其它变量时，链式失效风险高 - CSS 自定义属性作用域是继承的，但
var()查找从当前元素向上逐层，回退值没有作用域，它只是个固定字面量
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
