Less中用递归混合（mixin）配合守卫实现.order-1至.order-12类生成，需设终止条件避免“Recursion limit exceeded”错误，且参数@i必须动态递增而非固定为1。
Less中用循环生成.order-1到.order-12类名
直接用.loop-order混合（mixin）配合when递归就能搞定，不需要JavaScript或外部工具。Less本身不支持for循环，但递归+守卫（guard）是标准解法。
常见错误是忘记终止条件，导致编译报错Recursion limit exceeded；或者把@i写成字面量1，导致只输出一个类。
.loop-order(@i: 1) when (@i =< 12) {
.order-@{i} { order: @i; }
.loop-order((@i + 1));
}
.loop-order();
- 必须写
when (@i =，不是<code>（Less不支持该语法） -
.loop-order((@i + 1))括号不能省，否则加法不执行，会无限递归 - 如果项目需要支持
order: 0或负值（如-1），需单独定义，因为循环范围通常从正整数开始
为什么不用~"order-@{i}"拼接选择器
有人尝试用插值~".order-@{i}"动态生成选择器，但Less在解析阶段就要求选择器结构合法，插值无法用于顶层规则名——会直接报错Expected a variable name或ParseError。
正确路径只有两条：递归mixin（推荐），或用each()函数（Less 4.0+）。但each()对数组支持有限，且旧版Less不兼容。
立即学习“前端免费学习笔记（深入）”；
-
each()写法示例（仅Less ≥4.0）：each(1px 2px 3px, { .order-@{value} { order: unit(@value, ""); } });但这里@value是1px，还得用unit()剥离单位，反而更绕 - 守卫递归是全版本稳定方案，构建工具（Webpack/Vite）里无需额外配置
生成的order类如何与Flex容器配合生效
生成的.order-5这类类名只有在父元素设了display: flex或display: inline-flex时才起作用。单独使用不会触发重排，也不会报错，容易误以为“没生效”。
- 检查父容器是否缺失
flex声明，这是90%的“排序无效”原因 -
order值相同时，按HTML源码顺序排列，不是按类名先后——比如.order-3和.order-3并存，谁在前谁靠左 - 避免在同一个元素上同时写
order: 2和.order-5，CSS层叠会让后者覆盖前者，但可维护性差
要不要为order加!important
不建议。加!important会让调试变困难，而且现代CSS架构（BEM、utility-first）依赖明确的特异性层级，而非暴力覆盖。
真遇到冲突，优先检查：
- 是否父容器用了
flex-direction: column-reverse，导致视觉顺序和order值反向 - 是否子元素本身有
float或position: absolute，使其脱离Flex流 - 是否用了CSS-in-JS库（如Emotion），其动态样式插入顺序可能打乱Less预编译结果
真正难搞的是跨组件复用场景：A组件用.order-3，B组件也用，但希望B的order值整体偏移+2——这时得改用带命名空间的循环，比如.u-order-3，而不是硬塞!important。
