<p>SCSS的percentage()引发像素错位是因为它仅将小数转为带%字符串，浏览器解析时四舍五入导致累积误差；应改用calc(#{$a} / #{$total} * 100%)并确保$a、$total为整数，统一源头变量控制精度。</p>
为什么SCSS的percentage()会引发像素错位
因为percentage()只是把小数转成带%的字符串，比如percentage(1/3)输出33.3333333333%，浏览器解析时仍要四舍五入到 sub-pixel 级别。多个这类值加起来可能变成99.99999%或100.00001%，留出不可见间隙或强制换行。
用calc() + Sass变量替代percentage()
让浏览器在运行时做精确除法，而不是编译时固化近似值。Sass只负责拼接表达式，不参与数值舍入。
- 不要写：
width: percentage($a / $total); - 改写为：
width: calc(#{$a} / #{$total} * 100%); -
$a和$total必须是整数（如120、360），避免0.1 + 0.2类浮点误差 - Sass 3.4+ 支持直接插值；旧版本需用
unquote("calc(#{$a} / #{$total} * 100%)")
当必须用百分比时，控制小数位数
不是禁用percentage()，而是让它输出更少位数——每少一位，舍入误差就降低一个数量级。
-
round(percentage(1/3), 5)→33.33333% - 但注意：这仍是字符串，浏览器仍会四舍五入；更稳写法是：
#{round($a / $total * 100000) / 1000}%（保留三位小数） - 关键前提：父容器宽度要是整数像素，否则再精确也没意义
真正难的不是单个值，而是计算源头一致性
哪怕每个calc()都精确，如果栅格列宽、内边距、边框各自从不同变量推导，总和照样错位。所有相关尺寸必须共享同一套源头变量，比如统一基于$grid-unit: 12px，再用$grid-unit * 4、$grid-unit * 8等派生。
立即学习“前端免费学习笔记（深入）”；
fr单位天然规避这类问题，但IE不支持；calc方案能跑，前提是源头干净、整数、无隐式浮点运算。
