var()函数引用自定义属性需写为var(--name, fallback)，首参带双短横前缀，次参为变量无效时生效的任意合法CSS值；回退值不支持逗号和直接嵌套calc()，仅在当前调用处生效，不穿透变量链。
var()函数的基本写法和回退值语法
直接写 var(--color-primary, #007bff) 就能引用自定义变量并指定默认色。括号里第一个参数是变量名，必须带两个短横线前缀；第二个参数是回退值，当变量未定义或无效时生效。
回退值可以是任意合法 CSS 值：颜色、长度、数字、甚至另一个 var() 函数（但不推荐嵌套太深）。
- 回退值不能包含逗号——比如
var(--gap, 1rem 2rem)是错的，会解析失败 - 如果变量本身值含空格（如
1rem 2rem），必须用引号包裹再赋值：--gap: "1rem 2rem"，但这样后续使用会受限，不建议 - 回退值不支持 CSS 函数调用（如
calc()）直接写在第二参数里，得写成var(--size, calc(1rem + 2px))
回退值在变量链中如何生效
当多层变量依赖时，回退值只在当前 var() 调用处起作用，不会向上穿透。比如 --btn-bg: var(--primary-color, #007bff) 定义后，又写 background: var(--btn-bg, #6c757d)，那么只有 --btn-bg 未定义时才用 #6c757d，而不管 --primary-color 是否有效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 若
--primary-color未定义，--btn-bg的值就是#007bff（它的回退值），此时var(--btn-bg, #6c757d)不会触发回退 - 想实现“逐级兜底”，得每层都显式写回退值，不能指望自动继承
- 浏览器计算时按顺序展开：先取
--btn-bg值，再代入其结果；不会提前合并或预判变量有效性
常见错误：回退值被忽略或报错
最常遇到的是样式没变、DevTools 显示 invalid property value 或直接 fallback 到浏览器默认值。这往往不是 var() 写错了，而是变量作用域或类型不匹配。
立即学习“前端免费学习笔记（深入）”；
- 变量只在声明它的选择器范围内有效——
:root下定义才能全局用，局部.card { --color: red }只对.card及后代生效 - 单位缺失导致回退失效：比如
--size: 12（缺px），然后font-size: var(--size, 14px)，此时--size无效，会用14px；但如果写成--size: 12px，就一切正常 - 在
@media或@supports块里覆盖变量时，要确保覆盖时机早于使用位置，否则可能读到旧值
兼容性与运行时行为要点
var() 在所有现代浏览器中都支持（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 16+），但 IE 完全不支持——任何含 var() 的声明整条会被忽略，包括回退值。
- 服务端渲染或静态生成时，无法预计算
var()，它纯属客户端运行时行为 - JavaScript 修改
style.setProperty('--color', 'red')后，所有引用该变量的元素会立即重绘，回退值不参与此过程 - 用
getComputedStyle(el).getPropertyValue('--color')只能读变量原始值，读不到var()展开后的结果；要获取最终计算值，得读具体属性如backgroundColor
