必须显式用@if判断省略冗余align-items:center后缀，变量值须对齐CSS原生值，循环嵌套顺序为$dir→$jc→$ai，每个类必含三段式display声明且顺序不可颠倒，响应式类需用@media包裹并复用项目断点系统。
为什么不能直接用 @each 循环拼类名
直接写 @each $jc in $justifyList 和 @each $ai in $alignItemsList 嵌套，会生成大量无意义的组合，比如 flex-row-center-center——但 align-items: center 在多数场景下是默认隐式行为，类名里重复写 -center 反而干扰语义。更关键的是：SCSS 不会自动识别“center 该省略”，它只会老老实实把每个值都拼进去。
- 必须显式用
@if ($ai == center)控制后缀是否拼接，否则生成冗余类 -
$alignItemsList必须包含原始 CSS 值center（不是flex-center），且和flex-start、flex-end同级参与循环 - 漏掉
@if判断，会导致最终 CSS 体积膨胀 30%+，且开发者要反复查文档确认哪个-center是真生效的
如何正确声明变量与循环逻辑
变量定义要对齐 CSS 原生值，不能为了“好记”改成缩写。比如 justify-content: space-between 对应的变量值就是 space-between，不是 sb；align-items: center 就是 center，不是 c。否则 mixin 内部映射会错乱。
$flexDirections: (row, column, row-reverse, column-reverse)$justifyContents: (flex-start, center, flex-end, space-between, space-around, space-evenly)$alignItems: (flex-start, center, flex-end, baseline, stretch)- 循环结构必须是外层
@each $dir→ 中层@each $jc→ 内层@each $ai，再套@if
生成的类必须自带 display: flex
很多人只生成 justify-content 或 align-items 的工具类，却忘了 Flex 上下文本身需要 display: flex。纯靠外部加 d-flex 类来补，既增加 HTML 负担，又容易遗漏——尤其在响应式类里，md-flex-row-center 如果不带 display 声明，加了也无效。
- 每个生成的类都必须包含
display: -webkit-box; display: -ms-flexbox; display: flex;三段式声明 - 顺序不可颠倒：
-ms-flexbox必须在flex前面，否则 IE10/11 直接跳过 - 别把
flex-wrap硬塞进对齐类里——它和对齐无关，应单独提供flex-wrap-*工具类
响应式前缀怎么安全加
响应式类不是简单地在类名前加 md- 就完事。它必须包裹在对应媒体查询内，且父容器的 Flex 上下文得同时存在。否则 md-justify-content-center 在非 Flex 容器里完全没作用。
- 不能只改类名前缀，必须在外层用
@media (min-width: $breakpoint-md)包裹整个生成逻辑 - 所有响应式类内部仍需包含完整的
display声明，不能依赖外部类注入 - 如果项目用
@carbon/grid，它的flex-grid模块已内置断点系统，可直接复用breakpoint.$breakpoints变量，避免重复定义
真正难的不是写循环，而是搞清哪些值必须显式写出、哪些可以省略、哪些顺序不能动。一个 @if 漏判，或一个 display 漏写，就会让整套工具类在 IE 或 Safari 下集体失效——这种问题往往上线后才暴露，排查成本极高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
