当图标名称静态可枚举且需生成统一结构类名（如.icon-home）时，应使用@each；它适用于sass编译期确定的map或list，不适用于动态api数据或运行时判断。
什么时候该用 @each 生成图标类名
当你有一组图标名称（比如 home、search、user）需要对应生成统一结构的 CSS 类（如 .icon-home、.icon-search），且这些类名逻辑完全一致（只是后缀变化），@each 就是最直接的选择。它比手写或拼字符串更安全，也比 JS 构建更轻量——前提是你的图标映射关系是静态、可枚举的。
别在动态图标列表（比如从 API 拉取）或需要运行时判断的场景硬套 @each，Sass 编译期无法读取外部数据。
@each 基础写法与常见错误
错误常出在变量结构不匹配：你传给 @each 的必须是 Sass list 或 map。如果误把字符串当 list，编译会报错 Invalid CSS after "...": expected "{", was ";" 或更模糊的 Undefined variable。
- 正确写法：用 map 存图标名和对应 Unicode 或 background-image 路径，例如
$icons: (home: "\e001", search: "\e002", user: "\e003"); - 错误写法：
$icons: "home search user";—— 这是字符串，不是 list，@each $name in $icons会失败 - 若坚持用 list，写成
$icon-names: "home", "search", "user";，然后@each $name in $icon-names
注意：map 的 key 是 symbol（无引号）或 string（带引号），但遍历时 $key 取出的是实际类型，icon-#{$key} 在 key 是 string 时没问题，但 key 是 symbol 时也兼容。
生成类名时如何插入不同值（Unicode / SVG / class）
图标实现方式不同，@each 内部的属性赋值逻辑就得跟着变。同一份 icon map，可以复用结构，只改属性值。
- Unicode 字体图标：
@each $name, $unicode in $icons { .icon-#{$name}::before { content: #{$unicode}; } } - SVG Sprite（用
background-image）：@each $name, $path in $icons { .icon-#{$name} { background-image: url("#{$path}"); } } - 需要同时加通用样式（如 display、vertical-align）？直接写在循环外，避免重复声明
别在循环里重复写 display: inline-block 这种共性规则——提取到一个基础类 .icon 更合理，否则生成的 CSS 体积会膨胀。
性能和维护上容易被忽略的点
生成几百个图标类名时，@each 本身没性能问题，但输出的 CSS 文件体积和浏览器解析成本会上升。真正卡点往往在 map 定义本身：
- map 键名拼错（比如
"homme"）会导致生成不存在的类，调试时难定位——建议配合@if map-has-key($icons, $name)做校验（虽不常用，但关键项目值得加） - 图标名含连字符（
arrow-left）没问题，Sass 支持；但含空格或特殊字符需用引号包裹 map key - 如果团队多人维护这个 map，建议加注释说明格式规范，比如 “key 为小写英文，value 为 Unicode 十六进制字符串，不带
\u前缀”
最麻烦的不是写错 @each，而是 map 数据源和实际 HTML 中使用的类名不一致——这类问题不会报编译错误，只能靠人工核对或自动化检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
