应使用 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}少了连字符。 Shakespeare 一款人工智能文案软件能够创建几乎任何类型的文案。