Sass 不适合高精度混合单位计算，因其编译期单位严格不兼容（如100% + 20px报错），响应式逻辑必须用 calc()，Sass 仅负责拼接字符串；math.div() 等函数提升精度，但单位不一致仍导致失真。
直接用 Sass 做高精度数学计算，绝大多数时候是自找麻烦——它不是计算器，而是 CSS 预处理器。所谓“高精度”，必须明确是「编译期数值稳定性」还是「单位混合表达能力」；前者靠类型控制和函数封装，后者根本绕不开 calc()。
为什么不能依赖 Sass 的原生加减乘除做混合单位计算
Sass 的数学运算在编译期执行，单位检查极其严格。它不会猜测你想要“父容器宽度减去像素侧边栏”，只会报 Incompatible units: 'px' and '%'。
- 100% + 20px ❌ 编译失败：百分比和像素语义不兼容，Sass 不自动归一化
- 1rem + 16px ✅ 合法但危险：结果取决于基准（如 1rem = 16px），一旦根字号变更，计算就失效
- 20px * 1.5 ✅ 安全：无单位数可与任意带单位值相乘，结果继承单位
- 想算“容器宽 - 侧边栏”，别硬凑
$container-width - $sidebar-width，那只是静态快照，不是响应式逻辑
什么时候该用 calc()，什么时候该用 Sass 函数
区分核心：Sass 函数输出确定值（如 line-height(14px, 20px) 返回 1.42857），calc() 输出浏览器运行时表达式（如 calc(100% - 240px)）。
- 需要响应容器尺寸、视口变化 → 必须用
calc()，Sass 只负责拼字符串：width: calc(100% - #{$sidebar-width}); - 需要复用比例、缩放、查表逻辑 → 用
@function，例如interpolate(14px, 16px, 320px, 768px, 100vw)，但注意它返回的是带单位值，不能直接塞进line-height -
mod()、round()、pow()等新数学函数已成 Sass 一等公民，但仅限编译期简化；mod(100px, 30px)会算出10px，而mod(100%, 30px)仍保留为calc(mod(100%, 30px))，因为单位不可通约
避免精度丢失的三个实操细节
看似简单的除法或插值，常因单位、截断、上下文错位导致最终 CSS 值失真。
- 用
math.div($a, $b)替代$a / $b：旧版 Sass 中100% / 3可能静默失败，math.div()显式处理并保证返回合法 CSS 值 - 从 map 或配置中取值后，先用
@if unitless($val) == false { $val: $val / 1px; }剥离单位——否则16px + 2是错的，而16 + 2才是你想要的数字运算 - 调用
interpolate()类函数前，确保所有参数单位一致；若输入320px和100vw，Sass 无法比较，必须统一转成相同单位（如全用px，再用100vw换算系数）或改用纯calc()表达式
真正难的不是写对一个公式，而是判断哪部分该交给 Sass 编译期固化，哪部分必须留给浏览器运行时求值——混用二者时，单位、上下文、求值时机稍有错位，结果就完全不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
