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 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
.bg-loop(@list, @i: 1) when (@i = <h3>用 <code>for</code> 循环？别信——那是插件或误传</h3> <p>搜索“Less for loop”常看到形如 <code>.for(@list);</code> 或 <code>for(@i from 1 to 5)</code> 的写法，这些全部来自非官方插件（如 <code>less-plugin-for</code>）或用户自建 mixin 库。它们会破坏构建可移植性：Webpack 项目里能跑，CI 环境或纯 <code>lessc</code> 命令就报错 <code>Unrecognised input</code>。</p> <p>使用场景判断：</p>
- 团队统一用 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 =
<p>容易踩的坑：<code>@names</code> 和 <code>@colors</code> 长度不一致会导致 <code>extract()</code> 返回 <code>undefined</code>，编译不报错但 CSS 值为空；建议加注释或用 <code>// assert: length(@names) == length(@colors)</code> 提醒。</p>
<p>复杂点在于：Less 没有运行时类型检查，也没有调试输出机制，一旦逻辑出错，只能靠删减、分段注释、或临时加 <code>font-family: 'debug-@{i}';</code> 辅助排查。</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
