Less中@key为undefined因原生不支持.each()，需用.for()插件或递归mixin；推荐递归方式，将图标数据设为@icons: "home" 0 0, "search" -16px -24px等空格分隔列表，通过.generate-icons()逐项extract()处理，注意单位显式声明、名称清洗及length()终止条件。
Less中用.each()循环生成图标坐标时，为什么@key总是undefined？
因为Less原生不支持.each()——这是PostCSS或某些插件（比如less-plugin-lists）的扩展语法，不是Less语言本身特性。直接写.each(@icons, ...) { ... }会报错Unrecognised input。真正能用的是.for()（来自less-plugin-for）或纯Less递归混合宏。
推荐走标准Less路径：定义图标名与坐标映射表，用递归.generate-icons()混合宏展开。这样不依赖构建插件，兼容所有Less编译器（包括VS Code插件、Webpack less-loader等）。
- 把图标数据写成
@icons: "home" 0 0, "search" -16px -24px, "user" -32px -48px;这种空格分隔的列表 - 用
.generate-icons(@icons)递归处理每一项，每次extract()取第一个元素，再length()判空退出 - 注意
extract()索引从1开始，extract(@list, 1)才是首项
如何用Less递归混合宏批量生成background-position规则？
核心是把坐标数据“摊平”成可迭代结构，并在每次递归中拼出一个类名和对应定位值。关键点在于分离图标名和坐标，且允许坐标带单位（如-16px）。
.generate-icons(@list) when (length(@list) > 0) {
@item: extract(@list, 1);
@name: extract(@item, 1);
@x: extract(@item, 2);
@y: extract(@item, 3);
.icon-@{name} {
background-position: @x @y;
}
// 递归处理剩余项
.generate-icons(extract(@list, 2..length(@list)));
}
.generate-icons(@list) when (length(@list) = 0) {}
// 调用
@icons: "home" 0 0,
"search" -16px -24px,
"user" -32px -48px;
.generate-icons(@icons);
编译后会输出：.icon-home { background-position: 0 0; }、.icon-search { background-position: -16px -24px; }等。注意extract(@list, 2..length(@list))是Less 4.0+才支持的切片语法；旧版本需改用set-nth()模拟。
立即学习“前端免费学习笔记（深入）”；
为什么生成的background-position值没单位就失效？
Less中数字字面量（如0、-16）默认是无单位数值，但background-position要求带单位（px、rem等），否则浏览器忽略该声明。直接写"home" 0 0会导致background-position: 0 0——这其实合法（0是有效长度值），但"search" -16 -24就会变成background-position: -16 -24，被当作关键字（如left top）解析，而非像素偏移。
- 务必在坐标值后显式加单位：
"search" -16px -24px - 如果数据源来自JSON或外部配置，需在Less里用
unit()函数补单位：unit(extract(@item, 2), px) - 避免用
~"-16px"拼字符串——它绕过类型检查，后续无法参与计算（比如缩放图标时）
生成的CSS类名带特殊字符（如/或.）怎么处理？
Less变量名和类名生成时，若图标名含/（如"arrow/left"）、.或空格，.icon-@{name}会编译失败或产出非法CSS选择器。不能靠转义解决，得预处理名称。
安全做法是在数据层就做标准化：用连字符替代斜杠，删掉点号，再用replace()清洗：
.clean-name(@str) {
@n1: replace(@str, "/", "-");
@n2: replace(@n1, "\.", "");
@n3: replace(@n2, " ", "-");
@n3;
}
// 使用时
@name-clean: .clean-name(extract(@item, 1));
.icon-@{name-clean} { ... }
更彻底的方案是把原始图标名存在data-icon属性里，CSS类名统一用编号（.icon-1、.icon-2），靠:nth-child()或伪元素内容控制显示——但这脱离了语义化命名初衷。实际项目中，约束图标文件名（只允许[a-z0-9-]）比运行时清洗更可靠。
递归宏的终止条件、单位显式声明、名称清洗——这三个地方漏掉任何一个，生成的图标CSS都会在某类场景下静默失效。
