css变量不能存可重算公式，需用var()+calc()在使用处动态计算；变量应只存原子值（如--unit:1rem、--scale:1.2），calc()负责组合，避免嵌套calc()和单位冲突，兼顾兼容性与响应式。
不能直接在 CSS 变量里存“可重算”的公式，但能用 var() + calc() 组合实现真正响应式的数学逻辑——关键在于把计算动作推迟到使用处，而不是定义处。
为什么 --gap: calc(var(--unit) * 2) 看起来有效却不可靠
CSS 变量只存储字符串值，calc() 的求值发生在它被实际使用的声明中（比如 margin: calc(var(--gap))），而非变量定义时。所以 --gap: calc(var(--unit) * 2) 实际存的是字符串 "calc(var(--unit) * 2)"，而浏览器在解析 margin 时才尝试执行这个表达式。
问题来了：
- 如果
--unit尚未定义或类型不匹配（比如是1rem但乘数缺单位），整个calc()会静默失效，DevTools 显示Invalid property value却无报错 - 旧版 Safari（≤15.4）和部分 Android WebView 会直接丢弃含嵌套
calc()的整条规则，连 fallback 都不触发 - IE 完全不支持
var()，更别说参与calc()
正确写法：变量只存原子值，calc() 负责组合
把单位、系数、偏移量拆成独立变量，在使用点用 calc() 显式拼接。这样既清晰，又避开嵌套陷阱。
例如实现“基础间距 × 缩放系数 ± 固定偏移”：
:root {
--space-unit: 1rem;
--space-scale: 1.2;
--space-offset: 4px;
}
<p>.card {
padding: calc(var(--space-unit) * var(--space-scale) + var(--space-offset));
}</p>
注意：
-
var(--space-unit)必须带单位（如1rem），var(--space-scale)必须是纯数字（如1.2），否则calc(1rem * 1.2px)会因单位冲突报错 - 加减运算两侧单位必须一致：
calc(var(--space-unit) + 4px)合法，calc(var(--space-unit) + 4)非法（1rem + 4无意义） - 不要写
calc(calc(...))，哪怕只是视觉上“套一层”，Safari 15.4 之前会整条丢弃
兼容性兜底：PostCSS 展开 or Sass 预算？
如果你必须支持 IE 或老旧 WebView，不能依赖运行时 calc()，就得在构建阶段把能确定的部分算死。
PostCSS 链推荐配置：
- 先用
postcss-custom-properties把var(--x)替换为真实值 - 再用
postcss-calc（设preserve: false）展开calc(1rem * 1.2 + 4px)→1.2rem + 4px - 顺序错位会导致
calc(var(--x))原样输出，浏览器仍要运行时计算，失去兜底意义
Sass 更适合编译期确定的场景：
@use "sass:math";
$base: 1rem;
$scale: 1.2;
.card {
padding: calc(#{$base} * $scale + 4px);
}
但注意：$scale 是 Sass 变量，无法响应 JS 动态修改；而 --space-scale 是 CSS 变量，可以。
最容易被忽略的坑：单位隐式转换 + RTL 场景
很多人以为 calc(1em * 1.5) 总是安全的，其实不是。当父元素 font-size 改变时，1em 动态变，但 calc() 内部单位一致性由浏览器实时判断——某些安卓 WebView 会在 em 和 px 混用时直接放弃整条计算。
RTL（从右向左）布局下，margin-left 可能需转为 margin-inline-start，而 calc() 表达式本身不感知方向。若你用 calc(var(--space-unit) * 2) 控制缩进，记得在 RTL 上用 [dir="rtl"] .menu-item { margin-inline-start: ... } 显式覆盖，别指望自动翻转。
真正麻烦的从来不是怎么写对，而是怎么让错的时候有迹可循——加个 @supports (width: calc(0px)) 检测基础支持，再用 color: red 临时标记疑似失效的规则，比对着白屏猜强得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
