less原生无each函数，需用递归mixin模拟遍历；官方推荐做法是定义带终止条件（@i > length(@list)）的递归mixin，索引从1开始。
Less里根本没有each函数
Less本身不提供each这类高阶遍历函数，你看到的类似写法基本来自第三方插件（如less-plugin-lists）或误将Sass语法套用到Less。原生Less只支持.for()循环（需配合loop mixin）、递归mixin或extract() + length()手动实现“模拟遍历”。直接写each(@list, ...)会报错：Unrecognised input。
用递归mixin模拟数组遍历最可靠
这是官方推荐、零依赖、兼容所有Less版本（>=2.0）的做法。核心思路是：定义一个接收列表和索引的mixin，自身调用自己直到索引越界。
常见错误是忘记终止条件或索引从1开始却用length()比较出错——Less列表索引从1起，length(@list)返回总数，所以终止条件是@i > length(@list)。
.gen-classes(@list, @i: 1) when (@i =<p>使用时传入逗号分隔的值：<code>.gen-classes(1px, 2px, 4px);</code>，输出三个类。</p><h3>为什么不用<code>.for()</code>或<code>loop</code>插件</h3><p><code>.for()</code>不是Less内置语法，是某些构建工具（如<code>less-plugin-for</code>）注入的扩展，会导致：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
- 在VS Code Less插件中无法语法高亮或校验
- Webpack的
less-loader默认不启用该插件，需额外配置plugins字段 - CI环境容易因插件缺失直接编译失败
而纯递归方案无外部依赖，lessc命令行、Webpack、Vite全兼容，且逻辑透明——你清楚每一步怎么执行、哪条规则生效。
数组元素含空格或特殊字符要加引号
Less解析列表时，逗号是分隔符，但空格、括号、斜杠等会破坏结构。比如gen-classes(10px solid red, 2px dashed blue)会被拆成5项而非2项。
正确做法是用引号包裹每个复合值：
.gen-classes("10px solid red", "2px dashed blue");
此时extract()取出来的是带引号字符串，若需作为CSS值直接使用，得用~@{item}做转义；若只是拼类名，用@{item}即可（Less会自动去掉外层引号）。
真正麻烦的不是语法，而是维护性——当你要遍历几十个断点或颜色变量时，递归mixin的调试成本明显高于Sass的@each。这时候该考虑的不是“怎么在Less里硬搞”，而是评估是否值得迁移到更合适处理这类逻辑的工具链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
