less不支持原生for/each，旧版需递归混合，新版（v4.0+）才支持each()函数；判断是否支持可尝试编译each((1 2 3), ~"test")，不报错即支持；用each生成margin工具类需传入数值列表并用@{value}映射规则。
Less循环生成工具类时，为什么for和each都不直接可用？
Less本身没有原生for或each语法，所谓“循环”实际靠递归混合（.loop()）或内置函数each()（v4.0+）实现。旧版Less（如3.x）只能手写递归，新版才支持each(@list, @item)这种更直观的写法。如果你用的是Webpack + less-loader 8+ 或 vite-plugin-less，大概率已支持each；但若项目还在用less@3.x，强行写each会报错Unrecognised input。
判断方式很简单：在任意Less文件里写一行each((1 2 3), ~"test");，编译不报错就说明支持。
用each()批量生成margin工具类最简写法
核心是构造数值列表、映射成CSS规则。比如生成m-1到m-8，对应margin: 0.25rem到2rem：
@spacers: 1 2 3 4 5 6 7 8;
each(@spacers, {
.m-@{value} { margin: (0.25rem * @value); }
.mt-@{value} { margin-top: (0.25rem * @value); }
.mr-@{value} { margin-right: (0.25rem * @value); }
.mb-@{value} { margin-bottom: (0.25rem * @value); }
.ml-@{value} { margin-left: (0.25rem * @value); }
});
注意三点：
-
@{value}是each自动注入的当前项，不是@index（Less不提供索引变量） - 乘法运算必须加括号
(0.25rem * @value)，否则Less会当成字符串拼接 - 如果数值含单位（如
1px 2px），直接用@{value}即可，无需计算
递归混合兼容Less 3.x：手动实现.make-margins()
当each()不可用时，得靠递归。本质是定义一个带计数器的混合，自己调用自己直到终止：
.make-margins(@i: 1) when (@i =<p>关键细节：</p>
when (@i =是守卫条件，控制递归边界；漏掉会无限循环编译失败- 参数
@i必须显式传入(@i + 1)，Less不会自动递增 - 所有规则必须写在守卫块内，否则第一次调用就生成全部8组，失去递归意义
生成响应式工具类时，@media嵌套和循环怎么共存？
不能把@media写在each块外再套循环——那样只会生成一份CSS，重复应用到所有断点。正确做法是把@media放进循环体内部：
@breakpoints: xs sm md lg xl;
each(@breakpoints, {
@media (min-width: ~"#{@value}-width") {
.p-@{value}-1 { padding: 0.25rem; }
.p-@{value}-2 { padding: 0.5rem; }
}
});
但这里有个隐性坑：@value只是字符串xs、sm，你得提前定义好@xs-width: 480px等变量，否则~"#{@value}-width"拼出来是xs-width，没值。更稳妥的方式是用映射列表：
@breakpoints: "xs" 480px, "sm" 768px, "md" 992px;
each(@breakpoints, {
@name: extract(@value, 1);
@width: extract(@value, 2);
@media (min-width: @width) {
.p-@{name}-1 { padding: 0.25rem; }
}
});
复杂点在于Less不支持对象解构，必须用extract()从元组里取值，且each对元组的支持在v4.2+才稳定——低版本会直接报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
