用@for生成mt-1到mt-8最稳妥，需用插值.mt-#{$i}和margin-top: #{$i}px，避免单位拼接错误；响应式应嵌套在@each断点循环内，非线性间距则优先用@each遍历map。
用 @for 生成 mt-1 到 mt-8 这类间距类
直接用 @for 最稳妥，适合固定步长、明确范围的数值类名。Sass 不支持原生数组遍历生成带单位的值，@for 是最可控的方式。
常见错误是写成 @for $i from 1 through 8 却忘了把数字转成合法 CSS 单位（比如写成 margin-top: $i px 而不是 #{$i}px），结果编译报错 Invalid CSS after "...top: 2": expected expression。
- 必须用插值
#{$i}px，不能直接拼接单位 - 类名拼接也得用插值：
.mt-#{$i}，否则生成的是字面量.mt-$i - 如果想支持响应式断点，建议把循环包在
@each $bp, $query in $breakpoints内部，而不是为每个断点重复写一遍@for
@for $i from 1 through 8 {
.mt-#{$i} { margin-top: #{$i}px; }
.mr-#{$i} { margin-right: #{$i}px; }
.mb-#{$i} { margin-bottom: #{$i}px; }
.ml-#{$i} { margin-left: #{$i}px; }
}
用 @each 处理非线性间距（如 0.25rem、0.5rem、1rem）
当你的设计系统用的是语义化缩放（比如 Tailwind 的 spacing scale），@each 比 @for 更合适——它能直接遍历 map 或 list，避免硬编码计算逻辑。
容易踩的坑是 map key 类型不一致：用字符串做 key（如 "sm": 0.25rem）会导致生成的类名变成 .mt-"sm"，多出引号；必须用 unquoted key 或用 map-keys($map) 提取后显式转字符串。
- 推荐用无引号 key：
$spacings: (xs: 0.125rem, sm: 0.25rem, md: 0.5rem, ...) - 类名拼接时，key 默认就是字符串，直接
.mt-#{$size}即可 - 值如果是数字加单位（如
0.5rem），可直接赋给 CSS 属性，无需额外单位转换
$spacings: (xs: 0.125rem, sm: 0.25rem, md: 0.5rem, lg: 1rem, xl: 1.5rem);
@each $size, $value in $spacings {
.mt-#{$size} { margin-top: $value; }
.mx-#{$size} { margin-left: $value; margin-right: $value; }
}
为什么不要用 @while 写间距循环
@while 在 Sass 里可读性差、易出边界错误，且对间距这种简单序列毫无优势。它适合条件不确定的场景（比如递归计算斐波那契），但生成 mt-1 到 mt-12 完全没必要。
典型翻车现场：忘记手动递增变量，导致无限循环卡死编译器；或者终止条件写成 $i 却从 0 开始，结果少生成一个类。
-
@while需要显式声明和修改变量，比@for多至少两行代码 - 所有主流 CSS 工具链（Vite、Webpack、Dart Sass CLI）对
@for的优化都更好，编译速度略快 - 团队协作时，新人更容易理解
@for $i from 1 to 9，而不是一段带$i: $i + 1的@while
生成类名时注意命名冲突和输出体积
批量生成类名看着方便，但实际项目中很容易导出一堆用不到的规则，拖慢 CSS 解析速度。尤其当同时生成 mt/mr/mb/ml/mx/my/m 时，8 个值 × 7 种方向 = 56 条规则——其中可能 60% 压根没在 HTML 里出现过。
- 优先按需生成：只写项目真实用到的方向组合，比如多数布局只用
mt和mb - 避免生成
m-0到m-999这种暴力范围，Sass 编译器不会报错，但浏览器解析大文件时 layout 时间明显上升 - 如果用 Dart Sass，可通过
--style=compressed减少冗余空格，但无法删减未使用的类——这事得靠 PurgeCSS 或 Lightning CSS 的 tree-shaking
最常被忽略的一点：margin 类和 utility-first 框架的原子类共存时，CSS 特异性（specificity）可能意外覆盖组件内联样式，调试时得看清楚是 .card .mt-4 还是 .mt-4.card 在生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
