根本原因是map键值与css选择器命名不一致、unicode转义错误或基础样式重复定义；需确保键名匹配类名后缀、用unquote('"\#{$value}"')正确转义、抽离%icon-base避免覆盖，并检查字体格式兼容性。
为什么@each遍历Map生成图标类时样式不生效
根本原因通常是Map键值对没对齐CSS选择器命名逻辑，或@each内部拼接的类名与HTML中写的不一致。比如Map里写"home": "e901"，但生成的类却是.icon-home，而实际HTML用的是class="icon icon-home"——中间多了一层icon前缀，结果CSS压根没匹配上。
- 检查Map键名是否和你期望的类名后缀完全一致（大小写、连字符、下划线）
- 确认
@each循环里用#{"icon-#{$key}"}还是#{"#{$key}"}，别漏掉或多余前缀 - 生成的
::before内容必须用#{'\'}#{$value}转义，否则e901会被Sass当字符串字面量处理，输出成content: "e901"而非content: "e901"
Sass中Map的value怎么正确转成Unicode字符
直接写$value会出错，因为Sass把e901当普通字符串，不会自动识别为Unicode转义。必须手动加反斜杠并双引号包裹，再用unquote()去掉引号，否则CSS里会出现多余的引号。
- Map定义要写成
"home": "e901"（不带），而不是"home": "e901" - 在
@each里拼接：content: unquote('"\#{$value}"'); - 或者更稳妥：
content: unquote('"e' + $value + '"');（适用于$value是纯十六进制字符串）
用@each生成图标类时，如何避免覆盖已有的.icon基础样式
如果全局已有.icon { display: inline-block; font-family: "icon-font"; }，而你在@each里又单独写了.icon-xxx { display: inline-block; ... }，会导致重复声明，且可能被浏览器按CSS权重或顺序覆盖。
- 把基础样式抽成
%icon-base占位符，@each里统一@extend %icon-base - 或者让
@each只管::before部分，基础样式单独定义，不参与循环 - 注意不要在循环里重复写
font-family或font-style，这些应该由父类或伪元素继承
IE11兼容性下@each生成的图标类为啥显示方块
不是@each的问题，而是字体文件本身没包含IE11需要的格式，或CSS里没声明src的fallback顺序。Sass编译完就是普通CSS，IE11只认.woff和.eot，且eot必须放在src列表最前面。
立即学习“前端免费学习笔记（深入）”；
- 字体声明必须按此顺序：
src: url("icon.eot"); src: url("icon.eot?#iefix") format("embedded-opentype"), url("icon.woff") format("woff"); - 确保
unicode-range没误设（比如限制了只加载U+E900-U+E9FF，但IE11不支持该属性，反而导致整个字体不加载） - 用
font-display: block会加剧IE11图标闪烁或缺失，建议删掉或改用auto
Map结构本身没问题，问题永远出在字体路径、格式声明、字符转义这三处。调不通先查Network面板看字体文件404没，再开开发者工具看::before里content值对不对，最后看计算样式里font-family有没有生效。
