calc()中css变量必须用var()包裹，裸变量名会被忽略；乘除运算要求至少一个操作数为纯数字；单位混用存在兼容性风险，应避免嵌套calc()并优先用中间变量替代。
calc()里直接用CSS变量必须套var()
写calc(--gap * 2)浏览器会整条忽略，不报错也不生效——calc()只认字面量或var()函数，不认识裸变量名。这是最常静默失效的错误。
正确写法是calc(var(--gap) * 2)，前提是--gap定义为带单位值（如20px）；如果--gap是纯数字（如1.5），那它只能参与乘除运算，不能直接加减其他带单位值。
-
--gap: 20px→width: calc(var(--gap) * 2)✅ 输出calc(20px * 2) -
--scale: 1.5→font-size: calc(1rem * var(--scale))✅ 输出calc(1rem * 1.5) -
--gap: 20px+--scale: 1.5px→calc(var(--gap) * var(--scale))❌ 单位冲突（px * px非法）
乘除运算中至少一个操作数不能带单位
calc()的乘除规则很硬：参与*或/的操作数里，必须有一个是纯数字（无单位）。否则像calc(20px * 20px)或calc(100% / 2rem)都会失败，整条声明被丢弃。
常见做法是拆出两个变量：--size（带单位）和--multiplier（纯数字），组合成calc(var(--size) * var(--multiplier))。
-
--size: 16px、--multiplier: 3→width: calc(var(--size) * var(--multiplier))✅ -
--size: 16px、--multiplier: 3px→ 同样失效，--multiplier必须是3，不是3px - Sass里注意：
$gap: 16（无单位）和$gap: 16px拼进calc()结果完全不同
避免嵌套calc()，用中间变量替代
calc(calc(100% - var(--gap)) / 3)在Safari 15.4之前完全不支持，安卓WebView也常整条丢弃，且DevTools里只显示Invalid property value，没提示、没法调试。
更稳的做法是把中间结果提前定义为新变量，语义清晰、复用方便、兼容性好：
:root { --gap: 20px; --content-width: calc(100% - var(--gap)); }.sidebar { width: calc(var(--content-width) / 3); }- 响应式场景下，可在
@media里覆盖--content-width，无需重写整个表达式
单位混用要小心，尤其涉及兼容性
calc(1rem + 20px)现代浏览器能算，但IE11、旧版安卓WebView会直接抛弃整条规则——而且@supports (calc(1rem + 20px))也无法准确检测，因为解析阶段就失败了。
真正该用calc()的地方，是那些运行时才确定、无法编译期算死的场景：
- 绝对定位偏移：
left: calc(50% - 24px) - 填充剩余高度：
min-height: calc(100vh - var(--header-h) - var(--footer-h)) - Grid轨道定义：
grid-template-columns: repeat(auto-fit, calc(var(--card-width) - 16px)) - Flex/Grid子项上写
width: calc(100% - 20px)通常无效——主轴尺寸由布局算法控制，不是靠这个撑开的
变量值本身不会自动更新，比如--tab-count不会根据DOM元素数量自增；需要JS调用element.style.setProperty('--tab-count', count)显式注入，且时机要早于布局计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
