必须用双引号字符串化图标 map 的 key 和 value，content 值需外层双引号包裹并双反斜杠转义，font-family 必须显式声明，且循环前加空值守卫 @if $unicode != null and str-length($unicode) > 0。
直接用 @each 遍历图标 map 即可生成，但必须处理好 Unicode 转义、font-family 显式声明、空值守卫这三处，否则生成的伪元素要么不显示，要么编译报错。
图标 map 的 key 和 value 必须严格字符串化
SCSS 的 @each 对 map 解构时，key 若是未加引号的标识符（比如 home），会被当作变量解析；value 若含 Unicode，不加双反斜杠和引号会直接失效。
- 错误写法：
$icons: (home: \e900, search: \e901);→ 编译报错Undefined variable "\e900" - 正确写法：
$icons: ("home": "\e900", "search": "\e901");→ key 是字符串，value 是带引号的转义字符串 - 生成类名时必须用
.icon-#{$name}，不能漏掉#{}插值包裹
伪元素 content 值必须双引号包裹 + 双反斜杠转义
浏览器只认 content: "\e900" 这种格式；写成 content: \e900 或 content: '\e900' 都不行——前者被当变量，后者在 Dart Sass 中可能被截断为字面字符串。
- 生成规则里必须写：
content: "#{$unicode}";（注意外层双引号） -
::before规则中font-family不能省略或依赖继承，必须显式写死，例如：font-family: "iconfont"; - 调试时直接看 Chrome Elements 面板的 Computed 栏，确认
content解析出字符、font-family命中字体文件
必须加空值守卫，否则静默生成无效样式
设计系统迭代时，常临时注释掉某个图标项，但 map 里还留着 "archive": null 或 "archive": ""。这时 @each 仍会执行，生成 .icon-archive { content: null; } —— 浏览器忽略该规则，DevTools 看不到效果，排查极难。
- 加一层判断：
@if $unicode != null and $unicode != "" - 更稳妥可叠加
str-length($unicode) > 0防空字符串 - 完整守卫建议：
@if map-has-key($icons, $name) and $unicode != null and str-length($unicode) > 0
通用样式别塞进循环，否则 CSS 体积翻倍
所有图标类共用的 display: inline-block、vertical-align: middle、font-style: normal 等，如果写在 @each 内部，每个图标都会重复一遍，百个图标就多出上百行冗余 CSS。
- 提取到基础类：
.icon { display: inline-block; vertical-align: middle; font-style: normal; } - 循环只负责差异化部分：
.icon-#{$name}::before { content: "#{$unicode}"; } - 最终 HTML 写法是
<i class="icon icon-home"></i>，语义清晰且体积可控
最易被忽略的是 map key 的引号和 content 外层双引号——这两处不加，整个循环产出的伪元素全军覆没，但 Sass 不报错，只静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
