用 @each 遍历图标映射表（如 (home: "e900")），拼出 .icon-xxx 类并设置 font-family 和 content: #{$code}，注意码点需双反斜杠转义；字体文件路径、font-family 名称及 MIME 类型须正确配置。
怎么用Sass循环生成图标字体的CSS类名
直接说结论：用 @for 或 @each 遍历图标名数组，拼出 .icon-xxx 类，并注入 font-family、content 等规则。核心不是“生成字体”，而是“批量绑定Unicode码点到类名”。
常见错误是把Sass当构建工具用——它不处理字体文件生成，只管CSS输出。你得先用 icomoon / fontello 导出字体包和对应码点表（通常是JSON或CSS注释），再手动或脚本转成Sass可读的映射结构。
- 推荐用
@each $name, $code in $icon-map，比@for更安全，避免索引越界 -
$icon-map必须是键值对形式：(home: "e900", user: "e901")，不能是纯数组 - 码点字符串必须带引号，且用双反斜杠转义：
"\e900"，否则Sass会误解析为转义序列 - 别在循环里写
@import或嵌套@media，容易触发编译错误或冗余输出
Sass里content属性怎么正确插入Unicode图标
content 是唯一能显示字体图标的地方，但它对字符串格式极其敏感。错一个反斜杠，图标就变方块。
真实场景中，字体文件里的码点可能是十进制（如 59648）或十六进制（如 e900），但CSS只认十六进制字符串加反斜杠前缀。Sass不会自动转换进制，必须人工对齐。
- 从 Icomoon 下载的
style.css里找类似.icon-home::before { content: "e900"; }的行，提取码点 - Sass中必须写成
content: #{$code}，且$code值为"\e900"（两个反斜杠） - 如果用变量拼接，比如
"\#{$hex}"，要确保$hex不带0x前缀，也不含大写（E900在某些浏览器下可能不识别） - 别用
content: unquote($code)想“去掉引号”——这反而会让Sass把e900当普通文本，失去Unicode含义
为什么生成的图标类没效果？检查这三处
90% 的失效不是Sass写错了，而是字体链断在了前端运行时。
典型现象：类名生成了，开发者工具里能看到 content 和 font-family，但页面还是空白或方块。
-
font-family值必须和@font-face中定义的font-family完全一致（包括引号、空格、大小写），例如font-family: "icon-font"≠font-family: icon-font -
@font-face的src路径要是相对CSS文件的路径，不是相对HTML的；用../fonts/icon.woff2前先确认CSS文件在哪个目录 - 浏览器控制台Network标签页里搜
icon，看字体文件是否404或返回403；有些CDN或本地服务器默认不支持font/woff2MIME类型
要不要用Sass map + function封装图标调用？
可以，但只在项目图标数 > 50 且频繁增删时才值得。小项目硬套反而增加理解成本。
封装本质是把 .icon-home 这种类名调用，变成 @include icon(home) 或 icon-url("home") 函数。好处是改字体名时只动一处，坏处是调试时得跳转多次才能看到最终CSS。
- 函数内部仍要走一遍
@each查表逻辑，性能无差别 - 如果团队有人不熟悉Sass函数，写
.icon-xxx反而更直观 - 注意函数返回值类型：
content属性只能接受字符串，不能返回map或list - 别为了“优雅”在函数里做动态
@import—— Sass不支持运行时导入，编译期就报错
真正容易被忽略的是字体加载时机：CSS生成得再准，@font-face 加载完成前，content 就是空白。别指望Sass解决这个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
