<p>所有最终输出为px的计算值必须用round(),如@spacing-md: round(@spacing-base * 1.618); 单位需先用unit()剥离,精度设为0;中间计算保留小数;原子变量应统一取整以避免误差叠加。</p>

round()必须用于所有最终输出px的计算值
Less的round()不是可选优化,而是强制要求——只要结果要转成px单位,就必须包裹round(),否则编译出12.944px这类非法值,浏览器会丢弃或模糊渲染。
- 常见错误:写
@spacing-md: @spacing-base * 1.618;,漏掉round(),导致后续所有基于它的间距都带小数 - 正确做法:所有像素级变量定义都加
round(),例如@spacing-md: round(@spacing-base * 1.618); - 注意:只对“最终输出为px”的值用
round();如果是中间计算(如用于percentage()或rem换算),保留小数更安全,避免累积误差
别在round()里混用单位和无单位值
Less对单位极其敏感,round()参数必须是纯数字,不能带单位;但你传进去的变量如果本身含px,就会报错Operation on an invalid type。
- 错误示例:
round(16px * 1.5)→ 编译失败 - 正确解法:先用
unit(@val, px)剥离单位,再计算,最后补单位,例如round(unit(16px, px) * 1.5) * 1px - 若变量来自外部(如
@base: 16px),统一用unit(@base, px)转纯数字,再参与round()
round()精度参数不是可有可无的装饰
round(value, precision)第二个参数控制小数位数,它直接影响CSS合法性与视觉一致性。不写精度默认取整,但某些场景需要保留1位小数(如line-height: 1.4)。
- 像素尺寸必须
precision: 0(即整数),否则13.0px仍非法 - 百分比、行高、缩放因子等无单位值可设
precision: 1或2,例如round(percentage(9 / 16), 2)得56.25% - 避免
round(100% / 3, 0):这会得33%,三列加起来只有99%,导致布局错位;应改用grid或flex原生分配
所有关联值必须共用同一round路径
精度问题从来不是单点修复的事。一个padding用了round(),另一个gap用原始变量,整体布局仍会偏移——因为小数误差在不同属性间不抵消,反而叠加。
立即学习“前端免费学习笔记(深入)”;
- 推荐做法:定义一套“已取整”的原子变量,如
@pad-xs: round(4px * 1.618);、@pad-s: round(@pad-xs * 1.618);,全项目只引用这些 - 禁用混合策略:不要部分用
round()、部分靠calc()运行时处理,CSS变量无法被Lessround()触达 - 最容易被忽略的一点:根字体大小(
font-size: 16px)本身若由JS动态设置且未取整,所有rem换算都会继承其小数误差——所以round()要从源头开始管


















