sass 可通过 @each 遍历 $icon-map 生成 .ico-home、.ico-user 等类名，需用 @at-root 提升作用域、unicode 值加引号防解析错误；css 变量无法用于 content，故不可靠；命名空间前缀（如 ico-）可避免冲突；fallback 应设 font-family 回退链与对齐样式。
怎么用 Sass 自动生成字体图标类名
直接写 @each 遍历图标映射表，配合 @at-root 提升作用域，就能批量产出 .icon-home、.icon-user 这类类名。不用手写几十个，也不依赖构建插件。
- 图标名和 Unicode 值存成 Sass map：
$icon-map: ("home": "\e900", "user": "\e901") - 每个 key 生成一个类：用
@each $name, $unicode in $icon-map - 必须加
@at-root，否则生成的类会嵌套在父选择器里，变成.wrapper .icon-home，失去通用性 - Unicode 值要加引号，否则 Sass 会尝试计算（比如
\e900不加引号会被当十六进制数处理，报错）
为什么不能直接用 CSS 自定义属性传图标码点
因为伪元素的 content 不支持变量，content: var(--icon-home) 在绝大多数浏览器里不生效——它只接受字符串字面量或已计算的值，而 CSS 变量在 content 中无法被解析为 Unicode。
- 你看到的“生效”，大概率是用了 JS 动态写 style 或服务端渲染，不是纯 CSS
- Sass 编译阶段就能把
\e900写死进 CSS，这是可靠路径；CSS 变量是运行时机制，两者不在一个层面 - 如果硬要用 CSS 变量，得搭配
attr()+ HTML 属性，但维护成本陡增，且无法做 :before/:after 的统一基类
如何避免字体图标类名和项目其他类名冲突
加命名空间前缀是最简单有效的办法，比如统一用 ico- 而不是 icon-，因为 icon- 容易和第三方 UI 库（如 Element Plus 的 el-icon-xxx）或旧项目遗留类撞车。
- 前缀写死在循环里：
.ico-#{$name} { ... } - 别用
!important去覆盖，那只会让后续调试更难 - 如果项目已用 PostCSS，可考虑用
postcss-prefixwrap对整个 icon 模块加 wrapper 类隔离，但 Sass 方案更轻量、更可控 - 注意 Webpack / Vite 的 Sass
includePaths配置，确保全局变量文件（含$icon-map）能被所有组件正确 import
字体文件加载失败时图标显示方块，怎么降级处理
纯 CSS 无法检测字体是否加载成功，所以得靠策略性兜底：用系统默认符号（如 ● 或 □）占位，并控制尺寸对齐，而不是留白或崩 layout。
- 在基础 icon 类里设
font-family回退链：font-family: "icon-font", "Segoe UI Symbol", sans-serif - 给
:before加vertical-align: middle和固定line-height，防止字体缺失时基线偏移 - 慎用
font-display: optional：它会让字体加载失败时直接跳过，但图标就会彻底消失，不如swap至少保证文字 fallback 可见 - 真正可靠的加载状态监听得用
document.fonts.load()+ JS，但那是另一层逻辑，Sass 生成的类本身不解决这个问题
图标的“统一配置”本质是控制权收口——map 定义在哪、前缀怎么拼、fallback 怎么写，这些细节一旦分散，改一个图标就要 grep 全局。最麻烦的不是写代码，是半年后别人看不懂你当年为什么在 $icon-map 里把 "menu" 写成了 "hamburger"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
