sass的@each不能直接遍历纯数字序列（如1 2 3），因解析器将其视作多个独立语句而非列表；须显式构造列表（如$spacers: 0 4 8;）或使用range()生成，再通过插值拼接类名与单位。
为什么直接用 @each 遍历数字数组会报错
Sass 的 @each 不能直接遍历纯数字序列（比如 1 2 3 4 5），它只接受列表（list）或 map。如果你写 @each $i in 1 2 3，Sass 会报错：Invalid CSS after "1": expected expression。这是因为 Sass 解析器把空格分隔的数字当成了多个独立语句，而非一个列表。
正确做法是显式构造列表，常用 1px 2px 3px 4px 5px 或用 range()（Dart Sass 1.33+）生成数值列表：
$spacers: 0px 4px 8px 12px 16px 24px 32px;
<p>@each $size in $spacers {
.m-#{$size} { margin: $size; }
.p-#{$size} { padding: $size; }
}</p>
如何让类名更干净：去掉单位和小数点
直接用 8px 生成类名 .m-8px 不够简洁，通常希望是 .m-8；如果用了 0.5rem，还可能出现 .m-0.5rem 这种不友好的类名。需要提前剥离单位、格式化数值。
推荐在定义间距数组时就用无单位数值，再统一拼接单位：
- 用数字数组（如
0 4 8 12 16 24 32），在循环中加px或rem - 对 rem 场景，用
math.div($n, 16)转成基础 rem 值（假设 1rem = 16px） - 避免在类名中出现小数点：用
#{floor($n)}或#{round($n * 10) / 10}控制精度
示例（Dart Sass）：
@use "sass:math";
<p>$spacers: 0 4 8 12 16 24 32;
$unit: px;</p><p>@each $size in $spacers {
$val: #{$size}#{$unit};
$cls: #{$size};</p><p>.m-#{$cls} { margin: $val; }
.p-#{$cls} { padding: $val; }
}</p>
如何支持多方向 + 响应式前缀（如 md:m-8）
单纯 @each 只能处理一层循环。要叠加方向（t/r/b/l/x/y）和断点（sm/md/lg），得嵌套循环，但注意顺序和性能：嵌套过深会让输出 CSS 体积激增。
建议分两步：先定义方向映射，再与间距数组组合：
$directions: (
"t": "top",
"r": "right",
"b": "bottom",
"l": "left",
"x": "left right",
"y": "top bottom"
);
<p>$spacers: 0 4 8 12 16;</p><p>@each $abbr, $prop in $directions {
@each $size in $spacers {
.m#{$abbr}-#{$size} {
margin-#{$prop}: #{$size}px;
}
}
}</p>
响应式前缀可额外加一层 @each $bp, $query in $breakpoints，但务必确认项目是否真需要全量组合——多数情况下，只对常用尺寸（如 m-4、p-8）加断点更实际。
为什么生成的 CSS 类没生效？常见遗漏点
生成类名后仍无效，大概率不是语法问题，而是以下三个隐性原因：
- CSS 特异性（specificity）不够：比如你写了
.m-8，但某个组件内联样式或高优先级选择器覆盖了它 - 单位未被正确解析：Sass 中
8px是合法值，但如果变量里混入字符串（如"8px"），拼接时可能变成margin: "8px"，导致无效声明 - 未
@import或@use该文件：Sass 不会自动加载未被引用的文件，确保主样式表中引入了生成辅助类的文件
调试技巧：编译后检查生成的 CSS 是否真实存在对应规则；用浏览器开发者工具看 computed 样式里 margin/padding 是否被标记为 invalid —— 若是，基本就是单位或语法问题。
真正麻烦的是响应式嵌套 + 方向 + 单位混合后的命名一致性，一不留神就会导出 .m-t-0-5rem 和 .mt-0.5 两种风格，后期维护成本陡增。定好规范比写对 @each 更重要。
