calc()是css中唯一支持单位运算的函数，变量必须在calc()内使用且单位需一致，纯数字变量需显式补单位，加减运算要求单位兼容，混合单位须经实机测试验证。
calc() 是唯一能用的单位计算器
CSS 变量本身不支持任何运算，--size: 10px + 2em 这种写法浏览器直接忽略整条声明。真正能混合单位、读取变量、执行加减乘除的，只有 calc()。它不是“可选方案”，而是唯一合法路径——所有单位计算必须收束到 calc() 内部，且 var(--x) 必须出现在 calc() 括号里，不能在外面套一层再算。
变量值带不带单位，决定了 calc 能不能跑起来
calc(var(--gap) * 2) 报错？大概率是 --gap 存的是纯数字（比如 --gap: 8），而 CSS 不允许无单位数参与乘除。浏览器无法推导结果该是什么单位。
- ✅ 推荐：变量自带单位，如
--gap: 8px，然后用calc(var(--gap) * 1.5) - ✅ 可行但易错：变量存纯数字，如
--gap: 8，但在calc里显式补单位，如calc(var(--gap) * 1px)—— 注意右边只能是1px，不能是1px * 2或2px - ❌ 绝对不行：
--gap: 8px，却写成width: var(--gap) * 2（没包calc）；或--gap: 8，却写成calc(var(--gap) * 2px)（乘除右侧不能带单位）
加减运算的单位约束比你想的更严格
calc(10px + 2em) 看似合理，实际在部分安卓 WebView 和 IE11 中会整条失效；calc(10px + 5%) 则多数现代浏览器直接拒绝解析，回退为默认值。
- 加减项中，至少有一个必须是无单位数字（如
calc(var(--base) + 2)），此时2会被按当前属性上下文解释（font-size下可能当2em，margin下常当2px，行为不统一） - 最稳妥的做法：所有变量值都明确带单位，且加减项单位一致（
--pad: 16px，--border: 1px，再写calc(var(--pad) + var(--border))） - 调试技巧：用伪元素
content: "calc(...)"把表达式内容打出来，一眼看出是否被浏览器识别
别在 calc 里混用视口单位和角度单位
calc(100vh - 2rem) 合法，calc(10deg + 5rad) 也合法（同属角度单位），但 calc(100vh + 10deg) 会静默失败——CSS 要求参与运算的单位必须能相互转换或属于同一物理量纲。
- 长度类单位（
px、em、rem、vh、vmax）可混合，但需注意兼容性断层 - 百分比（
%）在width、height中可参与计算，在font-size中常被忽略，行为依赖属性上下文 - 颜色、时间、频率等单位完全不可与长度混用，
calc(var(--color) + 1)这类写法毫无意义，浏览器不报错但也不生效
真正容易被忽略的点：单位一致性不是靠人眼判断的，而是由浏览器运行时验证。哪怕你本地 Chrome 显示正常，Android 4.4 的 WebView 可能已丢弃整条规则——所以凡涉及单位混合，必须实机测试关键机型，不能只信桌面端表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
