用 @each 遍历 map 是唯一可持续的方式，手写类名属反模式；硬用 @for 会导致体积膨胀、单位耦合、语义缺失、正负难分；map 键需加引号、值必带单位；margin/padding 应分 map；嵌套 @each 可生成方向类；响应式应按需组合而非全量生成。
直接说结论：用 @each 遍历 map 是唯一可持续的方式，手写 .m-1 到 .m-24 属于反模式，后期改一个值就得全局搜替换，且无法语义化控制。
为什么不能用 @for $i from 1 through 200 硬生成
看似简单，实则埋雷：
- 生成的
.m-123类几乎永远不会被用到，CSS 体积暴涨但无实际价值 - 单位混用难统一——
$i/100 + rem和$i + px逻辑耦合在循环里，后续想切 rem 体系就得重写整段 - 无法表达语义：
"sm"、"lg"这类命名比纯数字更易协作，而@for只能产出数字后缀 - 负边距（如
.m-n2）需要独立 map 控制，硬循环无法区分正负逻辑
$spacers map 的键名和值必须怎么写
常见编译报错 Invalid null operation 或 Undefined variable "key"，基本都出在这两处：
- 键名如果是字符串（如
"sm"、"lg"），必须加引号："sm": 0.5rem✅，sm: 0.5rem❌（Sass 会尝试解析为变量） - 值必须带单位：
0.5rem✅，0.5❌（Sass 视为无单位数值，参与运算时报错） - 数字键可不加引号（
1: 0.25rem合法），但为了一致性和可读性，建议统一用字符串键："1": 0.25rem - 别把 margin 和 padding 塞进同一个 map —— 它们用途不同，后期维护时容易误改
如何用嵌套 @each 生成方向类（如 .mt-2、.px-3）
核心是分层控制：先定类型（m/p），再定方向（t/b/x/y），最后套尺寸键名。示例结构：
立即学习“前端免费学习笔记（深入）”；
$spacing-types: ("m": "margin", "p": "padding");
$spacing-directions: ("t": "top", "b": "bottom", "x": "left right", "y": "top bottom");
$spacers: ("1": 0.25rem, "2": 0.5rem, "3": 1rem);
@each $type-key, $type-prop in $spacing-types {
@each $dir-key, $dir-prop in $spacing-directions {
@each $size-key, $size-val in $spacers {
.#{$type-key}#{$dir-key}-#{$size-key} {
@if $dir-prop == "left right" {
#{$type-prop}-left: $size-val;
#{$type-prop}-right: $size-val;
} @else if $dir-prop == "top bottom" {
#{$type-prop}-top: $size-val;
#{$type-prop}-bottom: $size-val;
} @else {
#{$type-prop}-#{$dir-prop}: $size-val;
}
}
}
}
}
注意点：
-
"x"和"y"是语义缩写，对应双属性，避免写.mx-2却只生效一个方向 - 不要在插值里漏掉
#：.m#{$dir-key}-#{$size-key}✅，.m{$dir-key}-{$size-key}❌（语法错误） - 方向字符串值（如
"top"）不能直接拼进属性名，得用#{$type-prop}-#{$dir-prop}动态生成
响应式类（如 md:m-3）怎么加才不爆炸
盲目给每个间距都配 sm:、md:、lg: 前缀，CSS 体积轻松翻 3 倍。真正可控的做法是：
- 只对高频断点（比如
md和lg）+ 高频尺寸（比如"2"、"3"、"4"）组合生成，而非全量交叉 - 把断点 map 单独抽离：
$grid-breakpoints: ("sm": "(min-width: 320px)", "md": "(min-width: 768px)") - 生成时用
@media包裹，而不是靠工具链后处理前缀 —— 更可控，调试也直观 - 别让响应式逻辑和基础间距逻辑耦合在同一个循环里；先生成默认类，再用另一层
@each补响应式变体
最易被忽略的一点：所有 map 必须提前定义在 _variables.scss 中，且确保加载顺序在生成逻辑之前。否则 map-get($spacers, "2") 会返回空值，编译不报错但 CSS 不产出规则 —— 这种问题极难排查。
