必须用 @each $name, $unicode in $icon-map 遍历图标映射，因其唯一支持键值解构，确保名字与 unicode 正确绑定；其他方式无法维持映射关系，且 unicode 需双反斜杠转义并用 #{$unicode} 插值输出。
直接用 @each $name, $unicode in $icon-map 遍历键值对 Map 是唯一可靠方式，别用 @for 或 @while ——它们无法绑定名字与 Unicode，后期维护成本爆炸。
为什么必须用 @each $name, $unicode in $icon-map
SCSS 的 map 类型不支持裸遍历：@each $item in $icon-map 会报错。只有显式解构键值对才能安全取到图标名和对应码点。图标类的本质是“名字 → Unicode”映射，@each 天然匹配这个语义。
-
$icon-map必须是键值对形式，例如：("home": "\e900", "user": "\e901")；写成列表("home", "user")就丢失了码点关联 - Unicode 值必须双反斜杠转义：
"\e900"正确，e900或'\e900'会导致编译后content输出字面字符串或报Undefined variable - 每次从 IcoMoon / Fontello 导出新字体，都得手动同步更新
$icon-map中的 Unicode 值——SCSS 不校验字体文件是否真包含该字符，只负责原样输出
content 插值必须用 #{$unicode} 包裹
直接写 content: $unicode 会触发 SCSS 变量解析逻辑，把 "\e900" 当作字符串字面量处理，最终浏览器收不到 Unicode 字符。必须用插值语法强制转为纯文本。
- 正确写法：
content: #{$unicode}; - 错误写法：
content: $unicode;或content: "$unicode"; - 建议配合嵌套作用域写法：
&.icon-#{$name}::before { ... }，避免类名硬编码、提升可读性
字体声明和基础样式必须抽离为 @mixin
每个图标类都要重复写 font-family、font-style: normal、display: inline-block 等，既冗余又易漏。统一抽成 mixin 后，只需一处修改，全局生效。
- 基础 mixin 示例：
@mixin icon-base { font-family: "icon-font"; font-style: normal; display: inline-block; } - 调用时：
.icon-#{$name}::before { @include icon-base; content: #{$unicode}; } - 前缀变量（如
$icon-prefix: "icon"）建议提前定义，方便后续批量切换命名空间
最常被忽略的一点：生成的 CSS 类名必须真实出现在 HTML 中，且不能被更高优先级规则覆盖。如果编译后样式没生效，先检查控制台是否报 404（路径拼错）、是否被 !important 冲突、或伪元素被父级 overflow: hidden 截断——这些和循环本身无关，但最容易让人误以为是 @each 没跑通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
