sass编译期数值精度问题源于默认舍入策略而非bug,需用round()显式截断小数位,禁用已废弃的@precision配置,统一源头变量并区分编译期与运行时计算。

编译期数值精度失控,不是 Sass bug,而是默认舍入策略在作祟——它不报错,但输出的 0.87rem 比你想要的 0.875rem 少了 0.005rem,三层嵌套后字体就 visibly 偏小。
math.div() 后的小数位数怎么控制
Sass 的 math.div() 默认保留约 10 位小数,但浏览器解析 CSS 时会四舍五入到 sub-pixel 级别,多余位数没意义,反而可能干扰调试。关键不是“多保留”,而是“精准截断”。
- 用
round($value, $digits)显式指定小数位数,比如round(math.div(14px, 16px), 3)→0.875 - 不要对单位做 round:❌
round(14px / 16px, 3)rem(Sass 会先算除法再 round,但单位参与运算易出错) - 更稳写法:先除、再 round、最后加单位:
#{round(math.div(14px, 16px), 3)}rem - 若项目用了
postcss-pxtorem,math.div()层面就别转 rem,否则和插件双重转换,结果翻车
percentage() 输出的百分比总差那么一丢丢
percentage(1/3) 输出 33.3333333333%,三个加起来是 99.9999999999%,留白或重叠就从这儿来。这不是精度不够,是字符串拼接 + 浏览器解析链的固有误差。
- 优先用
calc()替代:width: calc(#{120px} / #{360px} * 100%),让浏览器一次性算完,数学上严格等于 100% - 必须用 percentage 时,强制截断:
round(percentage(1/3), 5)→33.33333% - 更狠但有效:
#{round((1/3) * 100000) / 1000}%,保证三位小数且无字符串隐式转换风险 - 所有相关值(栅格列宽、padding、gap)必须共用同一套源头变量,否则单点精度再高也白搭
@precision 配置根本不起作用
旧资料提的 sass --precision 10 或 Ruby Sass 时代的 @precision 在 Dart Sass(当前标准)里已被移除。它从来就不是控制输出精度的开关,而是影响内部浮点计算中间值的舍入——用户完全感知不到,也不该依赖。
- Dart Sass 不接受
--precisionCLI 参数,传了也忽略 - 没有等效的配置项可改全局精度;所有精度控制必须落在具体表达式里
- 想让
14px / 16px输出0.875rem?老老实实用round(..., 3),别找配置 - 构建工具(如 Webpack + sass-loader)若仍报 “Unknown option ‘precision’”,说明插件版本太旧,升级到支持 Dart Sass v1.7+ 的版本
真正难的不是让 Sass 多输出几位小数,而是判断哪个环节该由编译期决定(比如固定间距的 px 换算),哪个环节必须交给运行时(比如依赖 var(--col-count) 的列宽)。混用二者,精度再高也是假象。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











