calc() 处理复杂布局需满足三条件：显式调用 var(--name)、乘除至少一操作数无单位、加减单位一致；否则静默失效。
直接用 calc() 套 CSS 变量就能处理复杂布局，但必须满足三个硬条件：变量得用 var(--name) 显式调用、乘除运算中至少一个操作数不能带单位、加减两侧单位必须一致。否则整条样式会静默失效——DevTools 里只显示 Invalid property value，连报错都看不到。
为什么 calc(--gap * 2) 总是不生效？
因为 calc() 不认识裸变量名，它只认字符串字面量或 var() 函数。写成 --gap * 2 就像让浏览器去解析未声明的 JS 变量，结果就是跳过整条规则。
-
calc(var(--gap) * 2)✅ 正确，前提是--gap是带单位的值（如20px） -
calc(--gap * 2)❌ 失效，浏览器直接忽略该声明 -
calc(var(--gap) * var(--scale))⚠️ 风险高，--scale必须是纯数字（如1.5），否则20px * 1.2px单位冲突
嵌套 calc(calc()) 在 Safari 15.4 之前完全不支持
像 calc(calc(100% - var(--gap)) / 3) 这种写法，在旧版 Safari 和部分安卓 WebView 中会被整条丢弃，且无任何 fallback 或警告。
- 改用中间变量拆解：
--content-width: calc(100% - var(--gap));，再在使用处写width: calc(var(--content-width) / 3); - 避免在
calc()内部再调用var()+calc()组合，例如calc(var(--a) + calc(1rem * 2)) - 如果必须动态缩放 + 偏移，拆成三个原子变量：
--unit（带单位）、--scale（纯数字）、--offset（同单位），组合写为calc(var(--unit) * var(--scale) + var(--offset))
Sass 编译时计算和 CSS 运行时计算别混用
Sass 变量不能直接进 calc()，但可以在编译期先算好再插进去；而 CSS 变量则必须等运行时才参与 calc() 求值——两者机制完全不同，混用容易导致单位丢失或空格错误。
立即学习“前端免费学习笔记（深入）”；
- Sass 层拼接要显式加空格：
calc(#{$full} - #{$gap})→ 输出calc(100% - 20px)，手写字符串拼接易漏空格 -
$gap: 16（无单位）和$gap: 16px（带单位）在乘法后行为不同：#{$gap} * 2若没单位，结果仍是纯数字，塞进calc()就变成非法表达式 - PostCSS 降级需严格顺序：先
postcss-custom-properties替换变量，再postcss-calc（设preserve: false）展开，顺序颠倒等于没兜底
最常被忽略的是单位一致性——calc(1rem + 20px) 虽然现代浏览器能算，但在 IE11 和部分 Android WebView 中会整条规则失效，且无法通过 @supports 精准检测。真要兼容，就得在构建阶段把能确定的部分算死，而不是指望运行时补救。
