SCSS @each 解构 Map 必须写成 @each $key, $val in $map，否则报错或仅取键；Map 是键值对结构，非扁平列表，需显式双变量解构，键名须为字符串/identifier，嵌套 Map 需分层处理，避免误用 nth 或三重循环导致 CSS 体积膨胀。
SCSS @each 解构 Map 时必须写成 @each $key, $val in $map
直接写 @each $item in $map 会报错或只取 key，因为 SCSS 的 Map 不是扁平列表。Map 是键值对结构，@each 必须显式声明两个变量才能解构：$key 接收键名，$val 接收对应值。
常见错误现象：Invalid CSS after "...@each $item in $colors": expected "in", was ";" —— 这说明你把 Map 当成了 List；或者生成的类名全是 .color-0 .color-1，那是 nth($map, 1) 式误用。
- 正确写法：
@each $name, $hex in $colors { .color-#{$name} { color: $hex; } } - Map 定义需用括号：
$colors: ("primary": #0d6efd, "success": #198754);，不能用花括号或方括号 - 键名必须是字符串、数字或 identifier（如
primary），不能含空格或特殊字符，否则编译失败
嵌套 @each 生成多维类名时，注意输出规则爆炸
比如用 @each $type, $prop in $spacing-types 套 @each $dir, $axis in $directions 再套 @each $size, $val in $spacers，三重循环会产出 2 × 3 × 4 = 24 条规则。数量不可控时，容易让 CSS 文件体积陡增，尤其在移动端要警惕。
- 先确认是否真需要全部组合：比如
.mt-1和.mb-1可以合并为.my-1，不必穷举 - 用
@if过滤无效组合：@if $dir != "x" or $prop == "padding"跳过 margin-x 类 - 避免在循环里调用复杂
@function或嵌套@mixin，Sass 编译器不会优化重复计算
解构嵌套 Map 需配合 map-get()，不能靠多层 @each 自动展开
SCSS 的 @each 不支持“深度解构”，比如 $theme: ("light": ("bg": #fff, "text": #333), "dark": ("bg": #111, "text": #eee))，写 @each $mode, $config in $theme { @each $k, $v in $config { ... } } 是合法的，但如果你漏了中间层变量，直接 @each $k, $v in $theme 就只会拿到 "light" 和 "dark" 字符串，$v 是 null。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：始终把嵌套 Map 当作两层结构处理，外层解构键和子 Map，内层再用
map-get($config, "bg")取值 - 不要依赖
@each $a, $b, $c in $nested—— SCSS 不支持三变量解构嵌套 Map - 若子 Map 结构不统一（有的缺
border键），务必加@if map-has-key($config, "border")判断
生成带媒体查询的工具类时，@each 必须包裹在 @media 外层
想让 .mt-sm-2 只在 small 断点生效？别把 @media 写在 @each 块里面，否则每个类都带独立 @media 块，Dart Sass 无法自动合并，最终 CSS 里会出现 20 个重复的 @media (min-width: 576px)。
- 正确结构：
@each $bp, $query in $breakpoints { @media (#{$query}) { @each $dir, $prop in $dirs { ... } } } -
$query必须用插值#{$query}，否则编译器当字面量处理，输出@media "$query"导致无效 - 如果断点 Map 的 value 是完整媒体查询字符串（如
"(min-width: 576px)"），就不用拼screen and；如果是"576px"，就得手动拼：@media (min-width: #{$query})
@each 能一层穿透到底，其实它只解一层。写完循环后，用编译后的 CSS 反查类名和属性是否匹配预期，比看 SCSS 源码更可靠。 
