sass中calc()内必须用插值#{$var}且变量需带单位，禁止裸变量；跨单位运算（如100vh-64px）只能靠calc()；百分比布局误差需用calc()精确控制；嵌套calc()兼容性差应避免；postcss降级须按custom-properties→calc顺序处理。
calc() 里不能直接写 Sass 变量名
写 calc(100% - $gap) 会直接编译失败或生成无效 CSS，Sass 不允许变量裸露在 calc() 内部。浏览器看到的不是数学表达式，而是未解析的字符串，整条规则静默丢弃。
- 必须用插值：
calc(100% - #{$gap})，且$gap必须带单位（如24px），否则变成calc(100% - 24)→ 无效 - 空格不能省：
calc(100% - #{$gap})✅，calc(100%-#{$gap})❌（IE9 及旧版 Safari 直接失效） - 别用
percentage($a / $total)输出小数，它受浮点误差影响；改用calc(#{$a} / #{$total} * 100%)，让浏览器算最终值
混合单位减法必须靠 calc()，Sass 做不了
100vh - 64px 这种跨单位运算，Sass 编译期根本无法处理——单位不兼容，报错或退化成字符串拼接。你得到的不是响应式高度，而是一个固定像素值，窗口缩放时完全不动。
- 正确写法：
height: calc(100vh - #{$header-height});，其中$header-height: 64px - 错误思路：
$content-height: 100vh - $header-height;→ Sass 不支持vh和px混合运算 - 所有参与插值的变量都得是带单位的数值，
$gap: 16（无单位）会导致单位丢失，必须写成$gap: 16px
百分比浮动布局错位，calc() 是唯一靠谱解法
写 width: 33.33% 三列并排，常因四舍五入 + padding/border + box-sizing 不一致导致最后一列掉行。这不是 CSS bug，是累积误差。
- 必须加
box-sizing: border-box，否则calc(33.3333% - 12px)算的是 content 宽度，加上padding就超了 - 父容器宽度必须明确（比如设了
width: 100%或固定值），否则100%按 0 解析，结果为负 - 推荐写法：
width: calc((100% - 2px - 32px) / 3);，把左右边框、左右 margin 总和摊进去，除数用确定数字
嵌套 calc() 和 var() 组合极易失效
calc(calc(100% - var(--gap)) / 3) 在 Safari 15.4 之前全不支持，安卓 WebView 也常整条丢弃，DevTools 里只显示 Invalid property value，没警告也没 fallback。
- 拆开写：
calc((100% - var(--gap)) / 3)—— 用括号替代外层calc()，兼容性更好 -
calc(var(--unit) * var(--scale) + var(--offset))要求--scale是纯数字（如1.5），--unit和--offset单位必须一致 - PostCSS 降级必须严格顺序：先
postcss-custom-properties替换变量，再postcss-calc（设preserve: false）展开，颠倒就等于没兜底
真正难的不是写出一个 calc() 表达式，而是确认所有参与计算的单位是否在运行时真正一致——比如 1rem 是否被 JS 动态修改过根字号，--gap 是否由 JS 注入且带单位，以及父容器有没有被 transform 缩放过。这些细节一漏，calc() 就从“动态解法”变成“静默失效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
