@for循环生成0–100间距类虽语法合法，但需严格过滤：跳过0值防语义混淆，限制上限防体积暴增，显式加单位（如#{$i}px）避免报错，且不可混用margin/padding或误用@each遍历数字区间。
直接用 @for 循环生成 0–100 的间距类最简单，但必须注意单位、性能和语义边界——盲目生成 .m-0 到 .m-100 会引入大量无用 CSS，且 0 值类（如 .m-0）容易和重置类混淆。
用 @for 从 0 到 100 生成 px 单位的 margin/padding 类
适合快速原型或像素级精确控制的场景，比如设计系统中需对齐固定栅格。关键不是“能不能”，而是“要不要全生成”：
-
@for $i from 0 through 100是合法写法，$i会包含 0 和 100 - 必须显式加单位：
margin: #{$i}px✅，margin: $i❌（Sass 报错：Invalid null operation） - 不要在同一个循环里混用
margin和padding—— 容易后期误改，建议分两个独立循环 - 若只想要上下/左右方向，别写
.mt-#{$i}等复合类，先用@each控制方向更清晰
示例（仅生成上边距）：
@for $i from 0 through 100 {
.mt-#{$i} {
margin-top: #{$i}px;
}
}
为什么不能直接用 @each 遍历 0..100 这个范围？
@each 只能遍历已存在的 list 或 map，不能像 @for 那样动态生成数字序列。如果你硬写：
$nums: 0, 1, 2, ..., 100; // 手动列 101 个数？不现实
就会立刻卡在维护性上。所以遇到纯数字区间，@for 是唯一合理选择。常见错误是误以为 @each $i in (0..100) 合法——它根本不是 Sass 语法，编译直接失败。
生成前必须想清楚的三个过滤条件
100 个类不是越多越好，实际项目中超过 24 就该警惕。以下条件建议在循环内用 @if 过滤：
- 跳过无意义的 0 值：
@if $i > 0，避免.m-0和.p-0污染语义（重置应走.m-0还是.no-margin？） - 限制最大值：
@if $i ，因为大于 48px 的外边距极少被用到，CSS 体积徒增 - 按步长生成：
@if $i % 4 == 0，只输出 0、4、8…100，兼顾精度与体积
组合起来就是：
@for $i from 0 through 100 {
@if $i > 0 and $i <h3>rem 单位下生成 0–100 需额外处理单位换算</h3><p>直接写 <code>#{$i}rem</code> 会生成 0rem、1rem、2rem…100rem，这在视觉上完全失控（100rem ≈ 1600px）。正确做法是把 <code>$i</code> 当作系数，再乘以基准值：</p>
- 定义基准：
$base-spacing: 0.25rem（即 4px） - 计算：
margin: $i * $base-spacing，这样.m-4=1rem，.m-8=2rem - 仍要加
@if限制最终结果，比如@if $i * $base-spacing
否则生成的 .m-100 会输出 margin: 25rem，毫无实用价值。
真正容易被忽略的是：生成工具类不是目的，控制可维护性才是。哪怕只多一个 @if 条件，也比放任 100 个类进生产 CSS 更值得。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
