伪元素 content 插入 Unicode 字符应使用变量插值（如 $icon-home: \e901; content: #{$icon-home}），避免硬编码错误；Unicode 必须以 开头后接最多六位十六进制数；字符串函数无法动态生成转义序列，仅变量和 map 查找可行；字体加载与配置才是显示异常主因。
伪元素 content 里怎么插入 Unicode 字符
直接写 content: "e901" 是最常用方式，但硬编码容易出错——比如漏掉反斜杠、多打一个引号、或把十六进制当十进制用。Sass 的 str-slice 和 str-insert 对这个没用，真正能动态拼接的是 unquote() 配合字符串插值。
-
content只接受字符串字面量或插值结果，不能直接调用函数返回值；必须用#{}包裹表达式 - Unicode 编码必须以
开头、且后面紧跟**最多六位十六进制数**（如e901），超出会截断或报错 - Sass 编译时不会校验字符是否存在，写错只会渲染成方块或空白，调试得靠浏览器开发者工具看 computed 样式
用 Sass 变量存图标编码再拼接 content
把图标编码抽成变量，比散落在各处的 "e901" 更易维护。关键点是：变量值本身要带反斜杠，且不能加引号包裹，否则插值后变成 "\e901"（双反斜杠）被当成普通文本。
- 正确写法：
$icon-home: e901;（无引号，前面有反斜杠） - 错误写法：
$icon-home: "e901";或$icon-home: e901; - 使用时：
content: #{$icon-home};→ 编译为content: e901; - 多个图标可统一管理：
$icons: ("home": e901, "user": e902);，再用map-get($icons, "home")提取
为什么不能用 str-replace 处理图标编码
有人想把 "e901" 这种纯十六进制字符串前自动加 ，于是试 str-replace("e901", "e901", "e901")。这会失败，因为 e901 在 Sass 解析阶段就被当作转义字符处理，不是字符串。
- Sass 的字符串函数只操作已存在的字符串值，而
e901是 CSS token，不是字符串类型 -
str-replace输入必须是双引号或单引号包裹的字面量，如"e901"，但输出仍只是字符串，无法在content中触发 Unicode 解析 - 真正可行的“动态”仅限于变量插值和 map 查找，没有运行时编码转换逻辑
字体图标兼容性与字体加载时机问题
即使 content 正确写出了 e901，图标仍不显示，大概率不是 Sass 问题，而是字体没加载完或 font-family 指向错误。
立即学习“前端免费学习笔记（深入）”；
- 确保
font-family值和@font-face中定义的font-family完全一致（区分大小写、空格） - 避免用
font-family: "icon-font"同时匹配多个字体，优先指定唯一字体名 - 伪元素默认是 inline 级别，若父容器
font-size: 0或line-height过小，图标可能被裁剪，需显式设置font-size和line-height - WebFont 加载完成前，部分浏览器会先渲染空白或备用字符，可用
font-display: block控制闪动
