应使用 Sass 的 @each 遍历 map 自动生成间距工具类，避免手动写死；注意键名引号规则、插值语法 #{$key}、嵌套循环生成方向类、开关控制生成逻辑，并将 map 抽离至 _variables.scss。
用 @each 遍历 Map 生成工具类，别直接写死类名
手动写 .mt-1、.mt-2….mt-24 是反模式。Sass 的 @each 搭配 map 能批量产出，但必须注意键值对结构和插值语法——#{$key} 里不能漏掉 $，否则编译报错 Undefined variable "$key"。
常见错误是把数值当键名却没加引号，比如写成 (1: 0.25rem, 2: 0.5rem)，Sass 会当成表达式计算，实际应写为 ("1": 0.25rem, "2": 0.5rem) 或更稳妥的 (1: 0.25rem, 2: 0.5rem)（数字键可不加引号，但字符串键必须加）。
$spacings: (xs: 0.25rem, sm: 0.5rem, md: 1rem, lg: 1.5rem, xl: 2rem);@each $suffix, $value in $spacings { .m#{$suffix} { margin: $value; } }- 生成
.mxs、.msm等类，不是.m-xs—— 连字符需显式拼接：.m-#{$suffix}
用 map-keys() 和 map-values() 分离控制逻辑
有时需要单独遍历键或值，比如生成响应式断点类时，键是断点名（sm、md），值是媒体查询条件（(min-width: 320px)）。这时直接 @each $bp, $query in $breakpoints 更清晰；但如果只想生成所有断点前缀（如 sm:mt-2），用 map-keys($breakpoints) 提取后二次处理更灵活。
性能上无差异，但可读性提升：避免在循环体里反复调用 map-get() 查值，尤其当 Map 很大时。
立即学习“前端免费学习笔记（深入）”；
- 不要写：
@each $bp in map-keys($breakpoints) { @media #{map-get($breakpoints, $bp)} { ... } }（重复查表） - 推荐写：
@each $bp, $query in $breakpoints { @media #{$query} { ... } } - 如果要跳过某个键（如
base），用@if $bp != "base"过滤，别用map-remove()再遍历——多一次拷贝
生成带方向的间距类（mt/mr/mb/ml）得嵌套两层 @each
单层循环只能产出 .m-1 这种全向类，要支持 .mt-2、.pr-4 就得嵌套。外层遍历方向缩写（t、r、b、l），内层遍历数值，注意 CSS 属性名要动态拼接：margin-#{$dir}，不能写成 margin#{$dir}（少了连字符）。
容易踩的坑是方向映射写错：$dirs: (t: "top", r: "right", b: "bottom", l: "left")，但属性名是 margin-top，不是 margin-top 对应 t 就完事——得确认最终 CSS 是否合法。
$dirs: (t: "top", r: "right", b: "bottom", l: "left");$spacers: (1: 0.25rem, 2: 0.5rem);@each $dir, $full in $dirs { @each $s, $v in $spacers { .m#{$dir}-#{$s} { margin-#{$full}: $v; } } }- 生成
.mt-1→margin-top: 0.25rem，不是margin-t: ...
Sass 编译后 CSS 体积会膨胀，用 !default 控制开关
自动生成几百个工具类，CSS 文件可能暴涨几十 KB。别指望压缩工具完全救场——未使用的类仍存在。最实在的是加一层开关：定义 $enable-spacing-utilities: true !default;，再用 @if $enable-spacing-utilities 包住整个生成块。
这不只是性能问题，更是维护成本：团队协作时，有人改了 Map 却忘了关开关，导致生产环境多出一堆不用的类，DevTools 里找真实样式反而更费劲。
- 默认设为
false，项目初始化时显式设为true，避免意外启用 - 不要把开关逻辑塞进函数里——Sass 函数不能输出 CSS，只能返回值
- Map 数据建议单独抽到
_variables.scss，和生成逻辑解耦，方便复用或覆盖
真正麻烦的从来不是怎么写循环，而是 Map 数据结构设计是否贴合项目语义，以及生成范围是否被精确约束——写完记得跑一遍 sass --watch 看输出，别只信编译不报错。
