calc()中使用多个CSS自定义变量需确保各变量已声明且值为合法带单位数值（如8px），支持+−*/运算但乘除仅限一端为纯数字，加减要求单位兼容；单位不自动转换，%等仅在特定属性生效；嵌套calc()非法，应通过中间变量实现；所有变量建议配fallback；IE完全不支持。
calc() 里怎么用多个 CSS 自定义变量
可以直接用，但必须确保每个 --var 都已声明且值为合法数值单位（如 px、rem、%），否则整个 calc() 会失效，浏览器静默降级为初始值。
常见错误是把无单位数字或字符串塞进变量，比如 --gap: 8（缺单位）或 --type: small（非数值），这时 calc(var(--gap) * 2) 直接不计算。
- 变量必须带单位：写成
--gap: 8px，而不是--gap: 8 - 支持四则运算符：+、−、*、/，但乘除只能一边是纯数字（如
var(--base) * 2），不能两边都是带单位变量（var(--w) * var(--h)无效） - 加减要求单位可兼容：例如
var(--pad) + var(--border)要求两者都是长度单位（px和rem可混，但不能是px + %）
混合 px、rem、% 时 calc() 的单位处理规则
calc() 本身不自动转换单位，它只做符号运算；最终结果单位由参与运算的“主导单位”决定。比如 calc(1rem + 16px) 是合法的，浏览器内部会把 1rem 换算成当前根字体大小对应的像素再相加。
但如果你用变量包裹这些值，就得小心：变量值一旦写死单位，就锁定了它的可运算范围。
立即学习“前端免费学习笔记（深入）”；
- 避免
--offset: 5%和--size: 20px在同一个calc()里加减（calc(var(--offset) + var(--size))会失败） - 想灵活混用？统一转成
px或rem：比如设--base-font: 16px，然后用calc(var(--ratio) * var(--base-font))得到动态像素值 - % 只在某些属性中生效（如
width、top），用在font-size里不会按父元素百分比解析，而是当作无效值
嵌套 calc() 和变量 fallback 的写法要点
CSS 不支持函数式嵌套调用，所以 calc(calc(...)) 是非法语法；但你可以用变量间接实现“多层计算”——把中间结果存成新变量。
fallback（回退值）只对 var(--x, 10px) 生效，对 calc() 内部无效。也就是说，calc(var(--a, 10px) + var(--b, 20px)) 是 OK 的，但 calc(var(--a) + var(--b, 20px)) 中只要 --a 未定义，整个 calc 就崩。
- 所有参与
calc()的变量都建议配 fallback：calc(var(--pad, 0) + var(--border, 0) * 2) - 不要写
calc(var(--a) + calc(var(--b) * 2))—— 第二个calc()多余且报错 - 复杂逻辑建议拆解：先定义
--inner: calc(var(--base) * 0.75)，再用calc(var(--inner) + var(--offset))
PostCSS 或构建工具介入前的兼容性提醒
现代浏览器（Chrome 26+、Firefox 16+、Safari 9+）原生支持 calc() + 变量组合，但 IE 完全不支持 var()，所以任何含 var() 的 calc() 在 IE 下直接被忽略。
如果你必须兼容旧版 Safari（calc($a + $b)）生成静态值。
- 检查是否启用了
postcss-custom-properties插件：它能把var(--x)替换为实际值，让calc()在旧环境也能跑 - 注意插件默认不处理
calc()内部的变量，需开启preserve: false并配合postcss-calc - 移动端 UC 浏览器曾有
calc()解析 bug：空格缺失（如calc(100%-20px)）会导致计算失败，务必保留运算符前后空格
最易被忽略的是变量作用域和继承链——父元素定义的 --size，子元素 calc(var(--size) * 0.5) 能取到，但如果中间某层用 all: unset 或 revert，变量就断了，calc() 里的 var() 会 fallback 到你没设的默认值，甚至变成 unset 导致整条声明失效。
