百分比计算为什么在Sass里也容易出错
因为 percentage() 函数本身不解决舍入问题——它只是把小数转成带 % 的字符串，而浏览器最终解析时仍要四舍五入到 sub-pixel 级别。比如 percentage(1/3) 得到 33.33333%，但多个 33.33333% 加起来可能变成 99.99999%，留出 0.00001% 的空白或重叠。
用 calc() 配合 Sass 变量绕过百分比舍入
核心思路：让浏览器在运行时做加减，而不是在编译时就固化为近似值。Sass 负责生成精确的数字表达式，calc() 负责最终像素级对齐。
- 不要写
width: percentage($a / $total);，改用width: calc(#{$a} / #{$total} * 100%); - 确保
$a和$total是整数或已知精度的小数（避免0.1 + 0.2类浮点误差） - 注意：Sass 3.4+ 才支持在
calc()中直接插值；旧版本需用unquote()包裹 - 示例：
width: calc(#{120px} / #{360px} * 100%);→ 浏览器算出精确的33.333333%，且与其他同源 calc 表达式保持数学一致性
grid-template-columns 里用 fr 比百分比更稳
当布局目标是等分或比例分配容器空间时，fr 单位由 Grid 布局引擎原生处理，不经过 CSS 解析器的字符串转数值流程，天然规避了百分比舍入链。
- 避免写
grid-template-columns: 33.33333% 33.33333% 33.33333%; - 改用
grid-template-columns: 1fr 1fr 1fr;或按比例2fr 1fr 1fr; - 如果必须混用固定宽（如 sidebar）和弹性区，用
grid-template-columns: 240px 1fr 1fr;，而非换算成百分比 - 注意：IE 不支持
fr，如需兼容，才退回到带容错机制的 calc 方案
需要真·百分比时，用 Sass 的 round() 控制小数位
不是不用 percentage()，而是控制它输出多少位小数——少一位，舍入误差就小一个数量级。
立即学习“前端免费学习笔记（深入）”；
-
percentage(1/3)默认输出约 10 位小数，改用round(percentage(1/3), 5)→33.33333% - 但要注意：round 后仍是字符串，浏览器仍会四舍五入；所以更推荐组合方案：
#{round($a / $total * 100000) / 1000}%（保留三位小数） - 关键判断：如果父容器宽度是整数像素，且子项总和必须严格等于 100%，优先用
calc()+ 整数变量，而不是任何percentage()输出
真正难的不是写出某个百分比值，而是确认所有相关项是否共享同一套计算源头——比如栅格列宽、内边距、边框都从同一个 $grid-unit 推导，否则再精确的单个值也没用。
