less不支持原生.each()，报错因无数组遍历语法；应使用社区通用.for() mixin递归实现伪循环，需预定义键值对结构，无法运行时拼接变量名求值。
Less中用.each()循环生成图标类时为什么报错
Less本身没有.each()函数，这是常见误解。官方Less不支持原生数组遍历语法，强行写.each(@icons) { ... }会直接报错ParseError: Unrecognised input。真正可用的是.loop()（需自定义）或更稳妥的.for() mixin（社区广泛采用），本质是递归调用实现“伪循环”。
关键点：Less变量是静态的，不能运行时反射解析变量名字符串（比如把"icon-home"字符串自动转成变量@icon-home），所以“通过循环解析变量名”这条路在纯Less里走不通——它没有get-variable()这类运行时查变量机制。
- 想批量生成类，必须提前定义好键值对结构，例如
@icons: "home" 1em, "search" 1.2em, "close" 0.9em; - 不能写
@name: "home"; .icon-@{name} { ... }然后指望它自动读取@icon-home的值——Less不会拼接变量名再求值 - 若依赖外部构建工具（如Webpack+less-loader），可考虑用JS插件预处理，但这就脱离了Less原生能力
用.for() mixin批量生成.icon-xxx类的实操写法
社区通用方案是引入for.less（如less.curious里的实现），它用递归+参数传递模拟循环。假设你有一组图标名和对应Unicode码点：
@icon-map: "home" "\e900",
"search" "\e901",
"user" "\e902";
<p>// 引入 .for() 定义（需单独 import）
// @import "for";</p><p>.for(@icon-map, {
.icon-@{key} {
&::before {
content: @value;
font-family: "icon-font";
display: inline-block;
}
}
});</p>
注意：.for()第二个参数是带@key和@value占位符的规则块，不是CSS声明块——漏掉大括号或写成{ .icon-@{key} { ... } }嵌套过深都会编译失败。
- 确保
@icon-map是空格分隔的配对列表，不是逗号分隔的map对象（Less无原生map类型） - Unicode码点必须用双引号包裹并以
\开头，写成"\e900"，不能写e900或'\e900'（单引号在Less中不识别转义） - 如果图标字体用的是SVG symbol方式而非Unicode，则content值应为空，改用
background-image或use引用，此时循环生成的是.icon-home { background: url(...) }类
为什么不用@each而选.for()——兼容性与执行时机差异
@each是Sass语法，Less不识别。试图混用会导致Unrecognised input。Less的循环只能靠mixin递归实现，这意味着所有逻辑都在编译期展开，没有运行时开销，但也不能动态读取文件或环境变量。
- Webpack/Vite等工具链中，若用
less-vars-to-js把JSON转为Less变量，再喂给.for()，就能做到“配置驱动生成”，但JSON key仍需手动映射到Less变量结构 - 若图标名含连字符（如
"arrow-left"），@key会原样输出，生成.icon-arrow-left没问题；但若想自动转驼峰（arrowLeft），Less做不到——得交给JS预处理器 - 性能上，50个图标用
.for()生成约200行CSS，无明显编译延迟；但超过200项可能触发Node栈溢出（默认递归深度限制），需调大--max-old-space-size
实际项目中容易忽略的字体加载与继承问题
生成的.icon-xxx类只是样式骨架，真正显示图标还依赖字体文件正确加载和font-family继承链。常见失效场景：
-
font-family名写错（如定义时是"icomoon"，调用时写了"IconMoon"），大小写敏感且必须完全匹配 - 父元素设置了
font-family: "Helvetica"且未重置，导致::before继承了非图标字体——需显式写font-family: "icon-font" !important或确保层级足够高 - 图标字体文件路径404，浏览器控制台报
Failed to decode downloaded font或OTS parsing error，此时所有content都显示为方框 - 使用
font-display: swap时，首次加载可能出现文字闪烁（先显示内容码点数字，再替换为图标），需加.icon-* { visibility: hidden; }配合JS监听fontface.load后切换
批量生成解决的是“写多少行CSS”的问题，但图标是否真能显示，最终卡在字体文件、网络请求和CSS层叠这三关上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
