SCSS的@each不控制输出顺序，而是严格按数据结构遍历顺序执行：列表按书写顺序，Dart Sass 4.0+后map按插入顺序（旧版或某些构建环境可能按key字符串排序），嵌套循环则产生笛卡尔积顺序，需手动调整层级或改用列表保序。
SCSS 的 @each 本身不控制输出顺序，所谓“错乱”其实是你没意识到它严格按数据结构的遍历顺序执行——列表就是按书写顺序，map 在 Dart Sass 4.0+ 后按插入顺序（不是字典序），但旧版或某些构建环境仍可能按 key 字符串排序，导致生成的 CSS 类名看起来“跳着走”。
为什么 map 中的键顺序和你写的不一致？
Dart Sass 从 4.0 开始保证 map 插入顺序，但如果你用的是旧版 Sass（如 Ruby Sass 已停更）、或某些封装了 Sass 的构建工具（如老版本 vue-cli-service 内置 sass-loader），@each $key, $val in ("z": 1, "a": 2) 可能输出 .cls-a 在前、.cls-z 在后。这不是 bug，是底层实现差异。
- 验证当前行为：
@debug map-keys(("z": 1, "a": 2));看控制台输出是否为"z", "a" - 强制保序：改用列表 +
nth()拆解，比如$spacers: ("2": 0.5rem, "4": 1rem, "8": 2rem);→ 改成$spacers: (("2", 0.5rem), ("4", 1rem), ("8", 2rem));，再用@each $pair in $spacers { $key: nth($pair, 1); $val: nth($pair, 2); } - 避免依赖 map 排序：如果顺序敏感（如断点类
.sm-*, .md-*, .lg-*），直接用列表$breakpoints: ("sm", "(max-width: 640px)"), ("md", "(min-width: 641px) and (max-width: 768px)");
嵌套循环里 class 名拼接后顺序混乱
常见于多层 @each 套用时，比如先遍历方向 t/b/l/r，再遍历尺寸 1/2/3，结果得到 .mt-1, .mb-1, .mt-2…… 而你想要所有 -1 类聚在一起。这不是错乱，是双层循环天然的笛卡尔积顺序。
- 调整循环层级：把尺寸放外层，方向放内层，就能先出全部
-1类：@each $size-key, $size-val in $spacers { @each $dir-key, $dir-prop in $dirs { ... } } - 别用嵌套生成响应式类：写成
@each $bp, $query in $breakpoints { @media (#{$query}) { @each ... } }，否则每个@media块里都重复整套 class，体积翻倍且顺序不可控 - 如果必须混合顺序（比如
.m-1,.mt-1,.mx-1），就拆成多个独立@each块，手动控制先后
编译后 CSS 文件里规则顺序和 SCSS 不匹配
SCSS 编译器不会重排 CSS 规则顺序，但浏览器解析时，后声明的规则会覆盖同优先级的前声明规则。如果你发现 .mt-2 生效了却 .mt-1 不生效，大概率是两者选择器权重相同，而 .mt-2 在 CSS 文件里位置更靠后。
立即学习“前端免费学习笔记（深入）”；
- 检查是否意外引入了两份工具类：比如同时用了 Element Plus 的内置工具类和你自己写的
@each类，后者又 import 在前者之后 - 避免在不同文件里重复定义同一组类：统一收口到一个
_utilities.scss，其他地方只@use它 - 调试技巧：在编译后的 CSS 文件里搜索
.mt-1和.mt-2，看它们物理位置——顺序不对就回溯 SCSS 的@import或@use顺序
最易被忽略的一点：@each 的顺序问题从来不是语法问题，而是你把“人类直觉顺序”当成了“机器执行顺序”。真要严格控序，别依赖 map 键序，用列表；别依赖嵌套循环的自然组合，手动拆层；也别指望编译器替你整理 CSS 输出位置——它只忠实地把你的逻辑转成 CSS，一行不增，一行不减。
