Less 4 的 .each() 不支持数字范围遍历，需用递归 mixin（如 .make-col-classes）生成 .col-1 至 .col-12 类，因其零依赖、可控性强且兼容性好。
Less 4 的 .each() 函数不支持直接遍历数字范围
Less 4.0+ 确实引入了 .each()，但它只接受 list（列表）或 map（键值对），不能像 Sass 那样写 @for $i from 1 through 12。想生成栅格类（如 .col-1 到 .col-12），你得先构造一个数字列表——而 Less 没有内置的 range() 函数。
常见错误是直接写：.each(1..12, { ... })，这会报错：Operation on an invalid type，因为 1..12 不是合法 Less 表达式，也不会自动转成 list。
- 必须手动写
@cols: 1, 2, 3, ..., 12，或用递归 mixin 生成 - 也可以借助第三方插件（如
less-plugin-functions），但会增加构建依赖，不推荐在基础栅格中引入 - Less 4.2+ 支持
extract()和length()，可辅助做索引控制，但依然不能替代 range
用递归 mixin 生成 1–12 的列宽类（推荐方案）
这是最可控、零外部依赖的做法。核心思路：定义一个带计数器的 mixin，在每次调用时输出一条规则，然后调用自身直到达到上限。
.make-col-classes(@i: 1, @n: 12) when (@i =< @n) {
.col-@{i} {
flex: 0 0 calc((@i / @n) * 100%);
max-width: calc((@i / @n) * 100%);
}
.make-col-classes((@i + 1), @n);
}
.make-col-classes();说明：
立即学习“前端免费学习笔记（深入）”；
-
@i: 1是起始值，@n: 12是总列数，两者都支持传参覆盖 when (@i = 是守卫条件，防止无限递归- 每轮生成
.col-1、.col-2….col-12，宽度按比例计算（如.col-3→25%） - 注意不要漏掉终止调用：
.make-col-classes();，否则不会触发执行
用 list + .each() 实现更语义化的批量生成
如果你偏好显式 list 控制（比如需要跳过某些值、或按非线性序列生成），可以先定义 list 再遍历：
@grid-breakpoints: xs, sm, md, lg, xl;
@grid-columns: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
<p>.each(@grid-columns, .(@col) {
.col-@{col} {
flex: 0 0 calc((@col / 12) <em> 100%);
max-width: calc((@col / 12) </em> 100%);
}
});</p><p>// 响应式变体（需配合媒体查询 mixin）
.each(@grid-breakpoints, .(@bp) {
@media (min-width: ~"(@{bp}-breakpoint)") {
.each(@grid-columns, .(@col) {
.col-@{bp}-@{col} {
flex: 0 0 calc((@col / 12) <em> 100%);
max-width: calc((@col / 12) </em> 100%);
}
});
}
});注意点：
-
.each()的回调参数名（如.(@col)）必须带点号和括号，漏掉.会编译失败 - 嵌套
.each()时，内层变量名不能与外层冲突（比如都用@col），否则会被覆盖 -
~"(@{bp}-breakpoint)"是字符串拼接写法，实际需配合变量如@xs-breakpoint: 480px才能生效
性能与维护风险：别在 .each() 里做复杂计算
Less 编译是静态的，所有逻辑都在构建时展开。如果在 .each() 回调里调用多个函数（比如嵌套 percentage()、round()、unit()），不仅可读性差，还可能触发 Less 解析边界问题（如栈溢出或类型推导失败）。
- 栅格宽度建议统一用
calc()，避免percentage(@col / 12)这类旧式写法（Less 4 对除法优先级更严格） - 如果需要四舍五入像素值（如
max-width: 83.3333% → 83.33%），应在 JS 构建层后处理，而非在 Less 里用round(@x, 2)—— 它对小数精度不稳定 - 超过 24 列的栅格系统慎用递归，Less 默认递归深度限制为 128，12 列安全，但 48 列可能触发
Recursive call error
真正麻烦的不是写法，而是当设计师突然说“把断点从 5 个扩到 7 个”，你得同步改 list、改 media 查询、核对所有嵌套层级——这时候手写 list 反而比递归更易定位问题。
