Less不支持@for（Sass语法），必须用.each()函数或递归mixin生成栅格类；推荐递归mixin，因其可控性强、兼容性好、调试方便，且能精准传入@count、@total、@prefix参数生成如.col-sm-6等带断点前缀的类名。
Less 中用 .each() 或 for 循环生成栅格列类名时，别直接套 CSS 的 @for
Less 原生不支持 @for（那是 Sass 的语法），强行写会报错：ParseError: unexpected token `for`。必须用 Less 内置的 .each() 函数或递归 mixin —— 后者更可控，也更常用。
典型需求是生成 .col-1 到 .col-12，再叠加断点前缀如 .col-sm-6、.col-md-4 等。关键不是“怎么循环”，而是“怎么组织断点 + 列数 + 属性映射”。
- 用递归 mixin 比
.each()更易调试，尤其要控制生成顺序或跳过某些值时 - 列数范围建议硬编码为 1–12，避免用变量推导导致生成空类或越界
- 每个断点（sm/md/lg）应单独调用一次递归，不要试图在一个 mixin 里混搭所有断点
写一个支持断点的 .make-col() 递归 mixin
这个 mixin 接收三个参数：@count（当前列数）、@total（最大列数，如 12）、@prefix（断点前缀，如 sm 或空字符串）。
.make-col(@count, @total, @prefix) when (@count =< @total) {
.col@{prefix}-@{count} {
flex: 0 0 calc(100% / @total * @count);
max-width: calc(100% / @total * @count);
}
.make-col((@count + 1), @total, @prefix); // 递归调用
}
.make-col(@count, @total, @prefix) when (@count > @total) {} // 终止条件
调用方式示例：
立即学习“前端免费学习笔记（深入）”；
// 默认（无前缀）：.col-1 ~ .col-12 .make-col(1, 12, ""); <p>// 小屏：.col-sm-1 ~ .col-sm-12 .make-col(1, 12, "-sm");</p><p>// 中屏：.col-md-1 ~ .col-md-12 .make-col(1, 12, "-md");
- 注意
@prefix传入"-sm"而非"sm"，这样拼出的类名才是.col-sm-6，不是.colsm-6 -
calc(100% / @total * @count)是核心计算逻辑，确保 12 列系统下.col-4占 33.333% - 如果项目用的是固定 gutter（比如 1rem），记得在
max-width后额外加padding或用box-sizing: border-box
为什么不用 .each()？它在 Less 4.x+ 才稳定，且不支持嵌套断点逻辑
.each() 是 Less 4.0 引入的函数，语法类似：.each(@list, {@item}) { ... }。但它不能自然嵌套（比如外层遍历断点、内层遍历列数），容易写出不可读的嵌套回调。
- 低版本 Less（如 3.13）中直接用
.each()会静默失败或编译报错 - 即使可用，
.each()返回的是新结构体，无法像递归 mixin 那样直接插入 CSS 规则 - 调试困难：错误堆栈指向
.each内部，而不是你写的某一行逻辑
所以除非你明确锁定 Less 4.5+ 且项目无历史兼容压力，否则递归 mixin 是更稳妥的选择。
生成的 CSS 宽度计算必须匹配容器总列数，否则响应式会错位
常见坑是把 @total 写成变量（如 @grid-columns: 12），然后在 mixin 外修改它 —— Less 不会在递归展开时重新求值，仍按初始值编译。结果可能生成 .col-1 到 .col-12，但实际容器只分 8 栏，宽度就全错了。
- 务必把
@total作为 mixin 参数传入，不要依赖全局变量 - 如果项目需要多套栅格（比如 admin 区用 24 列），就定义多个调用组：
.make-col(1, 24, "-admin") - 注意浏览器对
calc()的兼容性：IE11 支持，但不支持calc(100% / var(--n))这种 CSS 变量写法 —— Less 编译后是纯数值，没问题
真正麻烦的从来不是循环本身，而是列数、断点、gutter、flex-basis 和 max-width 四者之间的耦合关系。少改一个地方，整行栅格就偏移像素级——这种问题往往要到真机横竖屏切换时才暴露。
