用@mixin封装+@each遍历map是唯一可持续方式，硬写或@for生成数字类导致维护难、单位混乱、语义缺失；统一用$spacers map驱动margin/padding/gap等工具类，支持方向与响应式嵌套，需严格校验map键值防null输出。
直接用 @mixin 封装 + @each 遍历 map 是唯一可持续的方式，硬写 .mt-1 到 .mt-24 或用 @for 循环生成数字类，后期改一个值就得全局搜、单位难统一、正负逻辑混杂，纯属自找麻烦。
为什么不能用 @for $i from 1 through 20 硬生成
看似省事，实则埋雷：
- 生成大量无用类（比如
.m-187），CSS 体积膨胀但零调用 - 单位耦合在循环里：
$i / 4 + rem和$i + px逻辑混在一起，后续切单位体系就得重写整段 - 无法表达语义：“sm”“lg”比纯数字更易协作，而
@for只能产出数字后缀 - 负边距（如
.m-n2）需要独立控制逻辑，@for无法天然区分正负或方向
怎么用 @mixin generate-spacer($prop, $prefix) 统一驱动多组工具类
一套 $spacers map 可同时驱动 margin、padding、gap 类，只需换属性名和前缀，不用重复定义数值：
-
$spacers: ("sm": 0.25rem, "md": 0.5rem, "lg": 1rem);—— 键必须加引号，值必须带单位 -
@include generate-spacer(margin, m);生成.m-sm、.m-md -
@include generate-spacer(padding, p);生成.p-sm、.p-md -
@include generate-spacer(gap, gap);生成.gap-sm、.gap-md - mixin 内部用
@each $name, $value in $spacers，直接用$value参与赋值，不建议提前转换单位（如 rem → px），应在遍历时按需用math.div($value, 1rem) * 16px处理
如何生成带方向的响应式工具类（如 .md:mt-lg）
关键不是堆砌所有组合，而是按需叠加：先定义断点 map，再在 mixin 中嵌套媒体查询。
- 断点必须是
map：$breakpoints: ("sm": 576px, "md": 768px);，值带单位，键传字符串（"md"✅，md❌） - 方向类 mixin 内部用
@each $bp, $width in $breakpoints，再套一层@each $size-key, $size-val in $spacers - 生成
@media (min-width: #{$width}) { .#{$bp}:mt-#{$size-key} { margin-top: $size-val; } } - 不要在同一个 mixin 里混用
min-width和max-width，否则区间重叠；桌面端样式写默认层，移动端靠@include respond-to("sm")向上覆盖 -
@content必须大括号包裹，且不能嵌套另一个含@content的 mixin（如respond-to里调hover-state会丢外层 media 结构）
真正容易被忽略的是 map 嵌套取值和防御检查：深层 key（如 $theme: ("dark": (color: (text: #fff)))）必须链式调用 map-get(map-get(map-get($theme, "dark"), color), text)，不能写 map-get($theme, "dark color text")；每次 map-get 前加 @if map-has-key($submap, $key)，避免 null 被输出为无效 CSS 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
