Less 中没有 each() 函数，官方推荐用递归 .loop() 混合模拟遍历：定义带索引参数的混合，用 extract(@list, @i) 取值（@i 从 1 开始），配合守卫终止递归，避免栈溢出或漏项。
Less 中根本没有 each() 函数
Less 本身不提供类似 Sass 的 @each 指令或 each() 函数。你在网上看到的“Less each 遍历”，基本是混淆了 Less 和 Sass，或是依赖第三方插件（如 less-plugin-functions），但这些在标准 Less 编译器（如 lessc、Vite、Webpack less-loader）中默认不可用，且维护性差、易出错。
用 .loop() 混合 + 递归模拟遍历
Less 支持带守卫（guards）和递归调用的混合（mixin），这是官方推荐、零依赖、兼容所有环境的遍历方案。核心思路是：定义一个带索引参数的混合，每次处理列表中第 @i 项，然后调用自身处理 @i + 1，直到越界终止。
常见错误现象：Maximum call stack size exceeded —— 忘记守卫或终止条件写错；生成空规则或漏项 —— 列表索引从 1 开始，不是 0。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 列表必须用括号包裹，例如
@colors: (#ff6b6b, #4ecdc4, #45b7d1, #96ceb4); - 用
extract(@list, @i)取第@i个值（@i从 1 起） - 守卫条件写成
when (@i =，注意是 <code>= 不是 <code>（Less 守卫语法） - 递归调用放在混合末尾，避免重复输出
示例：生成 .bg-{name} 工具类
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
.bg-loop(@list, @i: 1) when (@i =< length(@list)) {
@color: extract(@list, @i);
.bg-@{i} {
background-color: @color;
}
.bg-loop(@list, (@i + 1));
}
@colors: (#ff6b6b, #4ecdc4, #45b7d1);
.bg-loop(@colors);
用 for 循环？别信——那是插件或误传
搜索“Less for loop”常看到形如 .for(@list); 或 for(@i from 1 to 5) 的写法，这些全部来自非官方插件（如 less-plugin-for）或用户自建 mixin 库。它们会破坏构建可移植性：Webpack 项目里能跑，CI 环境或纯 lessc 命令就报错 Unrecognised input。
使用场景判断：
- 团队统一用 Vite +
less插件？仍建议避开插件，因 Vite 默认不启用任何 Less 插件 - 需要动态生成几十个间距工具类（如
mt-1~mt-24）？用递归.loop()更稳 - 想用变量名当类名（如
.bg-primary）？需额外映射表，不能只靠索引
生成语义化工具类时，列表和名称要解耦
直接用 extract(@list, @i) 只能得到值，无法生成 .text-blue-500 这类带语义的类名。这时需构造键值对结构——Less 不支持对象，但可用两个平行列表模拟：
@names: primary, secondary, success, warning;
@colors: #007bff, #6c757d, #28a745, #ffc107;
.loop-by-name(@names, @colors, @i: 1) when (@i =< length(@names)) {
@name: extract(@names, @i);
@color: extract(@colors, @i);
.text-@{name} {
color: @color;
}
.bg-@{name} {
background-color: @color;
}
.loop-by-name(@names, @colors, (@i + 1));
}
.loop-by-name(@names, @colors);
容易踩的坑：@names 和 @colors 长度不一致会导致 extract() 返回 undefined，编译不报错但 CSS 值为空；建议加注释或用 // assert: length(@names) == length(@colors) 提醒。
复杂点在于：Less 没有运行时类型检查，也没有调试输出机制，一旦逻辑出错，只能靠删减、分段注释、或临时加 font-family: 'debug-@{i}'; 辅助排查。
