percentage()只接受纯数字，传入带单位值或非法类型（如未定义变量、字符串）会编译失败或返回NaN；应先确保除法结果为小数，再用unit(@val, '%')替代更稳妥。
为什么直接用 percentage() 会出错？
Less 的 percentage() 函数只接受一个数字（如 0.25），不能直接传入带单位的值（如 1/4 * 100% 或 25%）。很多人写 percentage(1/4) 看似合理，但若未确保除法结果是纯小数（比如分母为 0、变量未定义或类型为字符串），就会编译失败或返回 NaN。栅格类批量生成时，这类计算密集，错误容易被掩盖。
- 确保所有参与计算的变量都是数字类型，可用
isnumber()检查 - 避免在循环中直接拼接单位，如
@width + '%' → 错误；应统一用percentage(@ratio)或unit(@ratio, '%') - 推荐用
unit(@val, '%')替代percentage()，它更宽容：支持unit(0.333, '%')和unit(33.3, '%')两种输入
用 .each() 配合 @columns 生成响应式栅格类
Less 3.5+ 支持 .each() 循环函数，适合遍历列数数组生成 .col-4、.col-8 等类。关键在于把列数映射为宽度比，并保留原始整数用于类名拼接。
@grid-columns: 12;
@breakpoints: {
sm: 576px;
md: 768px;
lg: 992px;
xl: 1200px;
};
<p>// 生成 .col-{n} 类（默认断点）
.col-@{n} when (@n > 0) and (@n =< @grid-columns) {
flex: 0 0 unit((@n / @grid-columns), '%');
max-width: unit((@n / @grid-columns), '%');
}</p><p>// 批量调用
each(@breakpoints, {
@key: @value;
@media (min-width: @key) {
.col-@{n}-@{value} when (@n > 0) and (@n =< @grid-columns) {
flex: 0 0 unit((@n / @grid-columns), '%');
max-width: unit((@n / @grid-columns), '%');
}
}
});</p>注意：each() 中的 @n 是隐式迭代变量，需配合 range(1, @grid-columns) 或手动数组才能真正循环列数——上面示例省略了 range 调用，实际需补全：
- 正确写法：
each(range(1, @grid-columns), .col-@{value}) -
range()返回数字数组，each()把每个数字赋给@value，再进规则体 - 类名拼接必须用
@{value}，不能写死@n（否则变量未定义）
如何避免 round() 导致的像素累积误差？
栅格宽度常需四舍五入到小数点后三位（如 8.333%），但 round(@val, 3) 在 Less 中对浮点精度控制有限，多个类相加可能突破 100%（如 12 × 8.333% = 99.996%，看似安全，但浏览器渲染时仍可能换行）。
立即学习“前端免费学习笔记（深入）”；
- 用
floor()或ceil()不解决问题，反而加剧偏差 - 更稳妥的做法是：最后一列用
flex: 1或max-width: none占满剩余空间 - 或者改用 CSS 自定义属性 +
calc()动态计算，把精度控制交给运行时：max-width: calc(var(--col-span) * 100% / 12) - Less 层只负责生成
--col-span: 4这类变量，不参与百分比运算
为什么 media 查询嵌套后编译体积暴涨？
如果对每个列数（1–12）都为每个断点（sm/md/lg/xl）生成独立选择器，最终 CSS 规则数是 12 × 4 = 48 条；若再叠加 offset/pull/push 变体，轻松破百。Less 编译器不会自动去重，且所有规则都会输出，哪怕某些组合从未使用。
- 按需生成：用
@include-cols: 4, 6, 8, 12;显式声明需要的列数，而非全量range(1, 12) - 抽离公共声明：把
flex、max-width提到顶层 mixin，各断点内只覆盖@media块 - 启用 Less 选项
math: always（v4+）避免因表达式未求值导致重复编译
复杂点不在语法，而在权衡：生成太少要手写补漏，生成太多拖慢构建、增加 CSS 体积。真正落地时，往往得配合构建工具（如 PostCSS 插件）做二次裁剪，Less 层只管结构清晰。
