<p>Less中percentage()默认保留高精度小数，如percentage(1/3)输出33.33333333333333%，需搭配round()控制精度，如round(percentage(1/3), 2)得33.33%，避免浏览器像素舍入错位；calc()不能直接引用Less变量，须用~"calc(100% - @{gutter}px)"原样输出。</p>
Less里百分比运算为什么总出小数位？
因为Less默认不做四舍五入，percentage(1/3)直接输出33.33333333333333%，浏览器渲染时会把这串浮点数转成像素再四舍五入，多个元素叠加就错位。这不是bug，是编译期保留精度的正常行为。
关键不是“怎么让Less算得更准”，而是“怎么让它输出你真正能用的值”。
-
percentage()只做比例转百分比，不控制小数位——必须搭配round() - 别写
width: 33.333333%;这种手算值，它本身已是近似结果，再参与后续运算只会放大误差 - 所有列宽、间距、偏移量必须从同一变量推导，比如
@columns: 12;，然后统一用percentage(1 / @columns)，而不是混用8.33%和16.66%
如何用round()控制输出精度
Less的round(@val, 2)能把33.33333333333333%压成33.33%，既减少CSS体积，又降低浏览器像素舍入的不确定性。
但要注意：round只作用于数值，单位要提前剥离或显式指定。
立即学习“前端免费学习笔记（深入）”；
- 正确：
width: round(percentage(1/3), 2);→33.33% - 错误：
width: round(33.333333%, 2);—— Less会报错“Operation on an invalid type”，因为带单位的值不能直接round - 安全写法：
width: round(unit(percentage(1/3), %), 2) * 1%;，先用unit()取纯数字，round后再拼单位
为什么calc()不能和Less变量混着写
写width: calc(100% - @gutter);一定会失败——Less会尝试把100% - @gutter当数学表达式解析，而%和px单位不兼容，直接报错。
calc()是运行时由浏览器执行的，Less只是字符串处理器。想让它原样输出，必须绕过编译期计算。
- 必须用
~"calc(100% - @{gutter}px)"，~""告诉Less：“别动，原样吐出来” - 变量插值只能在双引号内用
@{gutter}，不能写calc(100% - @{gutter})——缺单位，浏览器解析失败 - 别用
calc(@gutter * 2)这类写法，Less不认识calc内部语法，会当成普通函数调用报错
真正难的是源头一致性，不是单个值精度
就算你把.col-4的宽度设成round(percentage(4/12), 4)，如果padding、border、gap都用不同变量定义，或者没统一box-sizing: border-box，那再精确的百分比也救不了布局错位。
检查三件事：父容器是否明确宽度、所有相关尺寸是否从同一个@grid-unit或@columns推导、box-sizing是否被第三方样式覆盖——这些比纠结小数点后几位重要得多。
