less 没有内置 .each() 函数，需用递归混合（如 .generate-bg-classes）配合 extract() 和索引控制模拟遍历，列表索引从 1 开始。
Less 的 .each() 函数不能直接遍历列表生成 CSS 类——它根本不存在。 Less 语言本身没有内置 .each() 函数，这是常见误解，通常源于混淆了 Less 与 Sass（@each）或 JavaScript 的语法习惯。
Less 中真正可用的循环机制是 .loop() 混合 + 递归
Less 不支持原生 for/each 循环，但可通过自调用混合（recursive mixin）模拟遍历。你需要手动维护索引、提取元素、终止条件：
-
.loop()不是内置函数，而是开发者定义的递归混合，需自己写终止逻辑（比如当@i > length(@list)时return） - 必须配合
extract()提取列表项：extract(@list, @i)获取第@i个值（索引从 1 开始） - 每次递归调用要显式传入更新后的索引：
.loop(@list, @i + 1) - 注意：Less 列表是空格分隔的值，不是数组；
"a b c"和(a b c)都合法，但后者更清晰
正确写法示例：为颜色列表生成 .bg-xxx 类
假设你想把 (red blue green) 转成 .bg-red、.bg-blue、.bg-green：
.generate-bg-classes(@colors, @i: 1) when (@i = <p>这段代码会输出三个类。关键点：</p>
- 终止条件用
when (@i =，不是 <code>if（Less 没有 if 语句） - 必须写
.generate-bg-classes(...);调用一次启动循环，否则什么也不生成 - 变量插值用
@{color}，不是@color（后者是值，前者是拼接类名） - 如果列表含连字符（如
light-blue），需确保作为标识符合法，否则加引号或转义
为什么不用 JavaScript 插件或外部工具？
Less 编译是静态过程，不执行 JS；所谓 “Less 插件” 实际是构建工具（如 webpack 的 less-loader）在编译前/后注入逻辑，已脱离 Less 语法本身：
- 如果你在
less-loader里用math或plugin选项，那本质是 Node.js 运行时行为，不是 Less 语言能力 - 过度依赖这类方案会让样式逻辑分散（Less 文件里看不出循环，实际行为藏在配置里）
- 团队协作时，新人看到
.each()会误以为是 Less 原生语法，查文档找不到，徒增困惑
递归混合虽略繁琐，但完全在 Less 语法内可控；真正容易被忽略的是索引越界检查和插值语法——少一个 @ 或漏掉 when 条件，就会无限递归报错或静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
