因为直接用@each只做单层遍历，未嵌套断点维度，导致生成的.flex工具类（如.d-flex）全在默认层，缺失.sm\:d-flex等响应式变体；正确做法需三层嵌套：断点map→属性map→值map，并区分基础类与断点类生成逻辑。
为什么直接用 @each 生成 flex 工具类容易漏掉响应式断点？
因为多数人只在默认层级写一遍 @each，结果所有工具类（比如 .d-flex、.justify-content-center）都只产出非媒体查询版本。真正在项目里要用，得让每组类名在 sm、md、lg 等断点下也生成对应变体，比如 .md\:d-flex、.lg\:justify-content-between。
关键不是“能不能遍历”，而是“遍历的维度要包含断点 + 属性 + 值”三层嵌套，否则生成的工具类没法实际响应布局需求。
- 断点配置建议统一用 map，例如
$breakpoints: (sm: 576px, md: 768px, lg: 992px) - 属性和值也建议用 map 而非 list，方便后续扩展语义（比如
justify-content: (start: flex-start, center: center)） - 注意：SCSS 中
@each不支持多层同时解构，必须用嵌套@each或封装@function辅助
@each 嵌套三层时，怎样避免生成冗余类名或 CSS 重复？
三层嵌套（断点 → 属性 → 值）后，很容易把 .d-none 和 .sm\:d-none 都生成出来，但其实 d-none 在移动端就该生效，不该等断点才起作用——这是语义错位。
更合理的做法是：基础类（无前缀）默认作用于最小断点及以上；带断点前缀的类只覆盖该断点及更大视口。因此生成逻辑要区分「基础类」和「断点类」：
- 第一层
@each $breakpoint, $width in $breakpoints控制媒体查询包裹 - 第二层
@each $prop, $values in $flex-utils遍历属性组 - 第三层
@each $key, $val in $values生成具体声明，类名拼接为#{$breakpoint}-#{$prop}-#{$key} - 基础类单独用
@each $prop, $values in $flex-utils外层生成，不进媒体查询
示例片段：
@each $breakpoint, $width in $breakpoints {
@media (min-width: $width) {
@each $prop, $values in $flex-utils {
@each $key, $val in $values {
.#{$breakpoint}-#{$prop}-#{$key} {
#{$prop}: $val;
}
}
}
}
}
怎么让 flex-direction 类支持 row/col 简写，又兼容 row-reverse 这类复合值？
如果把 flex-direction 的值简单写成 (row: row, col: column)，就会漏掉 row-reverse 和 column-reverse。而硬塞进去又会让类名语义混乱（比如 .flex-dir-row-reverse 太长）。
解决方式是分两层映射：先定义方向基元（row、col），再用 @function 组合出完整值，并控制类名简洁性：
- 定义
$flex-direction-bases: (row: row, col: column) - 定义
$flex-direction-mods: ("": "", reverse: "-reverse") - 用函数
flex-dir-value($base, $mod)返回map-get($flex-direction-bases, $base) + map-get($flex-direction-mods, $mod) - 类名仍用
.flex-dir-#{$base}#{$mod}，生成.flex-dir-row、.flex-dir-col-reverse等
这样既没牺牲可读性，又避免手动枚举所有组合。
生成的工具类在真实项目中为何常被 !important 覆盖？
不是 SCSS 写得不对，而是生成顺序导致 CSS 特异性（specificity）不足。比如你用 @each 在文件末尾生成工具类，但前面引入的组件样式用了 .card .d-flex 这种组合选择器，权重天然更高。
真正起效的方式只有两个：
- 确保工具类 CSS 输出在所有业务样式之前（通过
@import顺序控制） - 或者给工具类加
!important—— 但仅限明确设计为“强制覆盖”的场景，如.d-none !important，且必须用变量开关统一控制，不能每个类手工加 - 更稳妥的做法是：用 BEM 式命名提升特异性，例如把
.d-flex改成.u-d-flex（u-表示 utility），再配合 CSS 层叠层（@layer utilities）在现代浏览器中管理优先级
工具类不是写出来就自动赢的，它必须嵌入到整个项目的 CSS 架构节奏里，否则再全的 @each 也只是静态字符串生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
