@each 是 Sass 中批量生成工具类的刚需手段，必须配合 Map 使用，通过嵌套遍历方向与间距/颜色等配置，自动生成语义化 CSS 类，避免手动重复和维护风险。
用 @each 遍历 Map 生成工具类，核心就一条：别手动写 margin/padding/color 的重复规则
直接说结论：@each 是 Sass 中最实用的批量生成手段，尤其适合把颜色、间距、断点这些配置型数据自动转成 CSS 类。它不是炫技功能，而是避免手误、提升维护性的刚需操作。
@each 必须配合 Map 使用，不能遍历普通列表或字符串
Sass 的 @each 只接受 Map（键值对）或 List（纯值数组），但生成工具类时几乎总是用 Map——因为你要给每个类名赋予语义化的 key（比如 sm、blue、flex），再绑定对应的 CSS 值（比如 0.25rem、#1e40af、display: flex）。
常见错误是把间距配置写成 List：
$spacers: (0, 0.25rem, 0.5rem, 1rem); // ❌ 这是 List，@each 取不到语义化 key
正确写法是 Map：
$spacers: ( "0": 0, "1": 0.25rem, "2": 0.5rem, "4": 1rem );
这样 @each $key, $value in $spacers 才能生成 .m-1 { margin: 0.25rem; } 这种带可读类名的输出。
生成 margin/padding 工具类时，必须拆解方向（t/r/b/l/xy/wh）再嵌套遍历
一个 $spacers Map 本身不包含方向信息，所以不能只靠一层 @each。你需要先定义方向映射，再用嵌套 @each 组合：
-
m表示 margin，p表示 padding -
t/r/b/l表示单边，x表示左右，y表示上下 - 每种组合都要对应到实际 CSS 属性，比如
m-t-2 → margin-top: 0.5rem
典型结构：
$directions: (
"t": "margin-top",
"r": "margin-right",
"b": "margin-bottom",
"l": "margin-left",
"x": ("margin-left", "margin-right"),
"y": ("margin-top", "margin-bottom")
);
<p>@each $dir-key, $prop in $directions {
@each $size-key, $size-val in $spacers {
.m-#{$dir-key}-#{$size-key} {
@if type-of($prop) == "list" {
@each $p in $prop {</p><h1>{$p}: $size-val;</h1><pre class="brush:php;toolbar:false;"> }
} @else {
#{$prop}: $size-val;
}
}
} }
注意：这里用了 @if type-of($prop) == "list" 判断是否为多属性（如 x/y），否则会把整个 tuple 当字符串输出，导致编译失败。
颜色工具类要小心透明度和变量作用域，别让 $color 覆盖全局变量
生成 .text-blue、.bg-gray-200 时，Map 的 value 往往是颜色值，但容易踩两个坑：
- Map 中写
"blue": blue会报错——Sass 不允许在 Map 字面量里直接用未定义变量名；得提前定义好$blue: #3b82f6;，再写"blue": $blue - 如果想支持透明度（如
.bg-blue-50），不要在 Map 里硬编码rgba(...)，而应在循环中用fade-out($color, 0.5)或transparentize($color, 0.5)动态计算 - 嵌套循环时，若同时遍历
$colors和$opacities，注意$color和$opacity这类变量名可能意外覆盖外层同名变量——建议加前缀，比如$color-key、$color-val
简单示例：
$colors: ("blue": $blue, "gray": $gray-300);
$opacities: ("50": 0.5, "100": 1);
<p>@each $color-key, $color-val in $colors {
@each $alpha-key, $alpha-val in $opacities {
.bg-#{$color-key}-#{$alpha-key} {
background-color: transparentize($color-val, 1 - $alpha-val);
}
}
}</p>
真正麻烦的不是语法，而是当你要支持响应式（md:m-2）、伪类（hover:bg-blue）、深色模式（dark:text-white）时，嵌套层级和条件分支会指数级增长。这时候该考虑抽离成 mixin，而不是堆砌 @each。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
