怎样使用Less高级函数批量生成CSS栅格布局类-css教程-PHP中文网

percentage()只接受纯数字，传入带单位值或非法类型（如未定义变量、字符串）会编译失败或返回NaN；应先确保除法结果为小数，再用unit(@val, '%')替代更稳妥。

怎样使用less高级函数批量生成css栅格布局类

为什么直接用 `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 =</p><p>// 批量调用
each(@breakpoints, {
@key: @value;
@media (min-width: @key) {
.col-@{n}-@{value} when (@n > 0) and (@n =</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%，看似安全，但浏览器渲染时仍可能换行）。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

用 floor() 或 ceil() 不解决问题，反而加剧偏差
更稳妥的做法是：最后一列用 flex: 1 或 max-width: none 占满剩余空间
或者改用 CSS 自定义属性 + calc() 动态计算，把精度控制交给运行时： max-width: calc(var(--col-span) * 100% / 12)
Less 层只负责生成 --col-span: 4 这类变量，不参与百分比运算