Less不支持在@font-face中动态插值路径或字体名，必须抽离至独立CSS文件或用构建工具处理；.each()可安全批量生成图标::before规则，需用双引号转义Unicode码如"\e901"并严格匹配key-value顺序。
Less里用循环生成图标字体的@font-face规则行不通
Less本身不支持在@font-face块内动态插值文件路径或字体名——哪怕你写@font-face { src: url("@{path}.woff2"); }，编译时也会报错或生成无效CSS。这不是语法问题，而是Less解析器对@font-face这类声明做了硬性限制：所有值必须是静态字符串，不能含变量或函数调用。
真正能走通的路只有一条：把字体定义抽离到独立CSS文件中手动维护，或者改用构建工具（如Webpack + fontmin-webpack）自动合成字体并输出对应CSS。Less只负责后续的类名映射部分。
用.each()遍历图标名列表生成::before样式
Less 4.0+ 支持.each()函数，适合批量生成.icon-home::before、.icon-user::before这类规则。关键点在于：图标名列表必须是map结构，且content值要用Unicode转义（如"\e901"），不能直接写""（后者会被Less当作普通字符串处理，最终CSS里显示为字面量而非图标）。
- 图标名和Unicode码需一一对应，建议从字体工具（如IcoMoon）导出JSON后转成Less map
-
.each()内部用@key取类名，@value取Unicode码，再拼进content - 必须加
font-family和font-style: normal，否则某些字体渲染异常
.icon-map {
.each(
(
"home": "\e901",
"user": "\e902",
"setting": "\e903"
),
.(@value, @key) {
.icon-@{key}::before {
content: @value;
font-family: "icon-font";
font-style: normal;
}
}
);
}
为什么不用for循环而用.each()
Less没有原生for语法，社区曾用递归mixin模拟，但极易触发编译栈溢出（尤其图标超20个时）。.each()是官方内置迭代器，底层做了优化，性能稳定，且语法更贴近语义——你不是在“计数”，而是在“对每个图标名做映射”。
另一个常被忽略的坑：.each()第二个参数是回调mixin，它接收两个参数（@value, @key），顺序不能颠倒。如果传成.(@key, @value)，结果会全乱套——类名变Unicode，Unicode变类名。
生成的CSS里content值必须是双引号包裹的转义序列
Less编译后，content: "\e901"会变成content: "\e901"（保留转义），浏览器才能识别为Unicode字符；如果写成content: @value且@value是未加引号的\e901，Less会尝试解析这个转义，失败后直接丢弃，最终CSS里变成空content: ""。
验证方法很简单：编译后打开CSS文件，搜索content:，确认值形如content: "\e901";，而不是content: e901;或content: "";。后者说明转义没生效或字体未正确加载。
Unicode码本身容易抄错——比如把\e901写成\u901（少一个e），或者混用UTF-8字面字符和转义，这种细节一旦出错，图标就彻底不显示，且控制台无报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
