Less不支持原生for循环，需用递归函数或each()实现按钮尺寸生成；extract()索引从1开始，递归须加when守卫防栈溢出，单位须统一，类名推荐语义化命名并配合条件编译。
为什么直接用 for 循环写按钮尺寸会出错
Less 不支持原生 JavaScript 风格的 for 循环，硬写 for (let i = 12; i 会直接报错 <code>ParseError: Unexpected token 'for'。它只认自己的循环语法 —— .loop() 混合（mixin）递归，或者用 each()（v3.5+）。老项目若用 Less v2.x，each() 根本不可用，必须手写递归。
用 each() 批量生成尺寸变量最省事
前提是你的 Less 版本 ≥ 3.5（推荐用 less@4.2.0+）。把尺寸数组传给 each()，再在回调里拼类名和样式：
@button-sizes: 12px, 14px, 16px, 18px, 20px, 24px;
<p>each(@button-sizes, {
.btn-size-@{value} {
font-size: @value;
padding: round(@value <em> 0.6) round(@value </em> 1.2);
min-height: @value * 2;
}
});</p>注意点：
-
@{value}是当前遍历值，不是字符串索引，所以类名直接写.btn-size-12px，别想手动加引号 - 算术运算如
@value * 0.6要求@value是带单位数值，否则 Less 报Operation on an invalid type - 如果想生成
.btn-sm/.btn-lg这种语义名，得另建映射 map，不能靠each()自动推导
兼容旧版 Less 的递归 mixin 写法
Less v2.x 或某些构建工具锁死版本时，只能用递归。核心是定义一个带计数器的 mixin，每次调用自己减一，直到终止：
立即学习“前端免费学习笔记（深入）”；
.generate-btn-sizes(@i: 6) when (@i > 0) {
@size: extract(12px 14px 16px 18px 20px 24px, @i);
.btn-size-@{size} {
font-size: @size;
padding: round(@size * 0.6) round(@size * 1.2);
}
.generate-btn-sizes(@i - 1);
}
.generate-btn-sizes(); // 启动
坑点很实在：
-
extract()索引从 1 开始，不是 0，写extract(..., 0)会返回空值 - 递归没写
when守卫条件？编译直接栈溢出，浏览器卡死 - 单位必须统一写在数组里（如全写
12px），不能混用12和14px，否则extract取出来类型不一致，计算失败
生成的 CSS 类怎么和 HTML 对上号
生成的类名是字面量，比如 .btn-size-14px，但 HTML 里写 class="btn-size-14px" 太反直觉。更实用的做法是：用变量控制输出模式。
@use-semantic-names: true;
<p>.btn-base {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
border-radius: 4px;
}</p><p>// 语义名模式
& when (@use-semantic-names = true) {
.btn-sm { font-size: 12px; padding: 6px 12px; }
.btn-md { font-size: 14px; padding: 8px 16px; }
.btn-lg { font-size: 16px; padding: 10px 20px; }
}</p><p>// 尺寸字面量模式（默认）
& when (@use-semantic-names = false) {
each(12px 14px 16px, {
.btn-@{value} {
font-size: @value;
padding: round(@value <em> 0.5) round(@value </em> 1.33);
}
});
}</p>真正麻烦的是响应式场景：同一套尺寸在移动端要缩放，但 Less 没有运行时媒体查询嵌套能力，所有 @media 必须提前写死，没法让 each() 自动包裹进去 —— 这部分得靠外层手动维护，或切到 PostCSS 处理。
