单层@each生成工具类易出错，因键名含冒号不被识别、断点与值强耦合；应分离断点与颜色数据并嵌套循环，且需确保map键加引号、变量作用域正确、非空初始化。
直接用 @each 遍历 Map 能生成基础工具类，但不加结构设计会立刻卡在响应式、命名冲突和编译静默失败上——这不是语法问题，而是数据组织方式错了。
为什么单层 @each 生成的工具类一加断点就漏变体
常见错误是把断点塞进 Map 键里，比如写 $colors: ("md:text-red": #f00)。SCSS 不允许键名含冒号，这行根本不会被识别为合法 Map，@each 直接跳过，也不报错。更糟的是，这种写法让断点和值强耦合，换一个断点就得重写全部键名。
正确做法是分离两层数据源：
$breakpoints: ("md": "min-width: 768px", "lg": "min-width: 1024px")$colors: ("red": #f00, "blue": #00f)
然后用嵌套循环：外层遍历断点生成 @media，内层遍历颜色生成类。这样每个断点只包裹一次媒体查询，CSS 体积可控，且新增断点只需改 $breakpoints 一处。
@each $name, $value in $map 解构失败的三个硬性条件
编译后没输出任何类？大概率栽在这三处：
- Map 的键没加引号：
"2": 0.5rem✅，2: 0.5rem❌（Sass 把数字字面量当无名键，@each拿不到$name） - 变量作用域不对：在
.card { $spacings: ("2": 0.5rem); }里定义，却在外层@each中引用——Sass 变量不会自动向上查找 - Map 初始化为空：
$spacings: () !default后直接@each，空 Map 导致整个循环静默跳过，连 warning 都没有
生成图标类时 content 显示为空白的真正原因
不是 SCSS 写错了，而是 Unicode 值和字体没对齐。SCSS 只负责原样输出 content: "\e900"，它不检查字体文件里有没有这个码点。
必须确认三件事：
-
$icon-map中的 Unicode 是双反斜杠转义形式："home": "\e900"✅，"home": "e900"或'\e900'❌ - ::before 规则中显式声明
font-family: "icon-font", sans-serif，不能依赖继承 - 浏览器开发者工具 → Elements → 选中元素 → Computed → 查看
content是否解析为字符，再核对font-family是否命中目标字体名
每次从 IcoMoon / Fontello 导出新字体，$icon-map 必须同步更新，否则旧值还在，新图标永远不显示。
间距工具类里方向组合（x/y）怎么安全展开
写 "x": ("left", "right") 这种嵌套结构时，@each 默认拿不到子项。得用 type-of() 判断类型再分支处理：
@each $dir-key, $dir-prop in $spacing-sides {
@if type-of($dir-prop) == "list" {
@each $side in $dir-prop {
.m#{$dir-key}-#{$size-key} {
margin-#{$side}: $size-val;
}
}
} @else {
.m#{$dir-key}-#{$size-key} {
margin-#{$dir-prop}: $size-val;
}
}
}
注意：$dir-prop 是字符串（如 "top"）还是列表（如 ("left", "right")）必须区分清楚，否则 margin-("left", "right") 这种无效 CSS 会被编译出来，浏览器直接忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
