Less 不支持 for/while 循环，所谓“循环”实为带终止条件的 mixin 递归调用；.each() 非 Less 原生语法，而是 Sass 的，直接使用会报错；可用 .make-grid-cols(@n, @max: 12) 等递归 mixin 实现类似功能。
Less 中没有真正的 for 循环，.each() 也不是原生语法
Less 本身不支持 for 或 while 循环，所谓“递归循环”其实是靠带终止条件的 mixin 递归调用实现的。很多人误以为 .each() 是 Less 内置函数——它不是，那是 Sass 的语法，直接照搬会报错：TypeError: Cannot resolve type of .each() 或编译失败。
真正能用的是带参数和条件判断的 mixin，比如：.make-grid-cols(@n, @max: 12)，每次调用自己，@n 递减直到
- 必须显式写终止条件（如
when (@n ），否则编译器会无限递归并报错：Maximum call stack size exceeded - 递归深度默认限制在 128 层，如果生成 24 列栅格，
@n从 24 开始递减没问题；但若写成从 1 开始累加到 24，容易因栈溢出中断 - 不要在递归 mixin 里拼接字符串做 selector，Less 不支持运行时字符串插值（
~".col-@{n}"可用，但@{n}必须是数字变量，不能是表达式）
生成响应式栅格需分断点 + 多层递归，不是单个 mixin 能搞定
一套完整栅格系统（如 Bootstrap 风格）要覆盖 xs、sm、md、lg、xl 断点，且每套断点都要生成 .col-*、.col-sm-* 等类。这意味着不能只递归列数，还要递归断点列表。
推荐做法：先定义断点 map：@breakpoints: sm 576px, md 768px, lg 992px, xl 1200px;，再用 .loop-breakpoints(@list) 递归遍历，每轮调用 .make-col-classes(@n, @prefix) 生成该断点下的所有列宽。
-
@breakpoints必须是空格分隔的 pair 列表（不是 map 数据结构），因为 Less 没有原生 map 迭代函数 - 断点名（如
sm）要用extract()提取，宽度值用extract()+ 偏移取，例如extract(@list, 2)取第一个宽度 - 每个断点生成的 CSS 规则要包裹在媒体查询里，
@media (min-width: @width)，注意单位必须带px，否则 Less 编译报错：Operation on an invalid type
生成的 class 名和 width 计算容易出精度问题
栅格列宽通常是 calc(100% / 12 * n)，但 Less 中直接写 calc(100% / 12 * @n) 会被提前计算成小数（如 calc(8.33333333% * 3)），最终结果可能有浮点误差，浏览器渲染时出现 1px 偏差。
- 正确写法是用字符串拼接：
calc(~"100% / 12 * @{n}")，让calc()在浏览器端运行 - 避免用
percentage(@n / 12)，它返回带%的字符串，但calc()里不能嵌套百分比运算，会导致无效 CSS - 偏移类（如
.offset-3）要单独递归生成，不能复用列宽 mixin，因为 offset 需要margin-left: calc(...)，而 order 类（.order-2）只需整数，无需 calc
编译后 CSS 体积大，建议按需生成而非全量输出
一个 12 列 + 5 断点 + 3 类型（col / offset / order）的栅格系统，会生成近 300 行 CSS。如果你只用到 col-6 和 col-md-4，全量生成就是浪费。
- 把递归 mixin 封装进
.grid-setup()，只在需要时调用，而不是放在全局入口文件里无脑执行 - 用
@include-grid: true;开关控制是否生成，默认false，项目中显式设为true再.grid-setup() - 开发阶段可加
// DEBUG: generated @n classes注释，编译后 grep 检查是否多生成了废弃断点
递归生成栅格的关键不在“炫技”，而在控制好终止条件、断点遍历顺序和 calc 表达式的延迟求值——漏掉任意一环，要么编译失败，要么生成的 CSS 在某些设备上错位一像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
