必须用Mixin而非重复手写flex属性组合，因其能杜绝拼写错误、集中响应式逻辑、支持参数化复用；:extend()仅适用于无参静态结构共享。
为什么不能直接写 display: flex 一遍又一遍
重复手敲 display: flex、flex-direction、justify-content 这套组合，不仅容易漏掉 align-items 或写错值，还会让响应式逻辑散落在各处。更麻烦的是：当设计规范要求所有「横向居中容器」统一加 gap: 0.5rem 时，你得 grep 全项目改十几处——而漏改一处就导致视觉不一致。
Less 的 .flex-row()、.flex-col-center() 这类带语义的 Mixin，本质是把「固定结构 + 可变参数」编译成静态 CSS，既杜绝拼写错误，又让调用方只关注「我要什么效果」，而不是「flex 有哪几个属性」。
.flex-stack() 怎么支持断点切换方向
常见错误是把断点逻辑硬编码进 Mixin 体内部，比如在 .flex-stack() 里直接写 @media (max-width: 768px) { flex-direction: column; }——这会导致无法复用，也无法被父级媒体查询包裹（比如整个模块要统一禁用移动端堆叠）。
- 正确做法：把断点作为参数传入，用
when守卫控制生成逻辑 - 示例：
.flex-stack(@breakpoint: md) when (@breakpoint = sm) { flex-direction: column; @media (max-width: 576px) { flex-direction: row; } } - 搭配变量管理：
@breakpoint-sm: 576px;，后续只需改变量，不用动 Mixin 内部 - 避免在 Mixin 中直接输出媒体查询嵌套块，除非明确需要隔离作用域
什么时候该用 :extend() 而不是 Mixin
如果你只是想让多个容器共享「display: flex; align-items: center;」这种无参数、无计算的纯结构声明，:extend() 更轻量——它不生成重复 CSS，也不引入额外 class 名。
但以下情况必须用 Mixin：
- 需要动态值：比如
.flex-between(@gap: 1rem)，@gap参与计算或生成gap属性 - 需条件分支：如
.flex-center(@dir: row) when (@dir = column) { flex-direction: column; } - 目标选择器本身是 mixin 调用结果（如
.make-layout()生成的类），:extend()无法识别 - 跨文件引用时，
:extend()目标必须已出现在当前编译作用域（即前面的@import链中），否则静默失败
如何避免 Mixin 参数爆炸和默认值失控
一个 .flex-container() 接收 8 个参数，每次调用都得填满，等于换种方式写 CSS——这违背封装初衷。
实操要点：
- 只暴露真正会变的参数：主轴方向、对齐方式、是否换行、间隙大小，其他如
flex-wrap: wrap设为默认 - 用命名参数调用，提升可读性：
.flex-container(@direction: row, @justify: center)，调用时写.flex-container(@justify: space-between)即可 - 避免在 Mixin 内部做复杂计算（如根据
@gap自动推导padding），这类逻辑应由调用方显式控制 - 如果某组参数总是一起出现（如
@justify和@align），考虑拆成两个独立 Mixin，而非强耦合
最易被忽略的一点：Mixin 编译后不可逆——它生成的是最终 CSS，没法像 CSS 自定义属性那样运行时修改。所以别试图用 Mixin 模拟主题切换，那是自定义属性的职责。
