Less不支持原生for、while循环，所谓“循环生成z-index”实为通过.each()或递归mixin配合守卫条件模拟实现。
Less里没有原生计数器循环，for不是关键字
Less不支持for、while这类运行时循环语法，所谓“循环生成z-index”本质是利用.each()或递归混合（mixin）+ 保护条件模拟。直接写for (let i = 0; i 会报错：ParseError: Unrecognised input。
常见错误现象：复制粘贴Sass的@for写法，结果编译失败；或误以为each()能像JS一样遍历任意数组——其实Less的.each()只接受预定义列表（如@z-list: 1, 2, 3;），且不能动态构造。
- 必须提前定义好索引值列表，比如
@z-indices: 10, 20, 50, 100, 999; - 递归mixin需要显式终止条件，否则触发
Maximum call stack size exceeded - 生成的CSS规则顺序依赖调用顺序，
z-index叠加层逻辑容易和实际DOM结构脱节
用递归mixin安全生成连续z-index序列
这是最可控的方式：定义起始值、步长、总数，靠自身调用展开。关键在when守卫防止无限递归。
@index
- 修改
@total即可控制生成数量，无需手动增删类名 - 所有生成类都带命名空间（如
.z-3），避免全局污染 - 若需跳过某些值（如避开
z-index: 2147483647这种危险值），得改用列表遍历而非纯数字递归
用.each()处理非连续z-index需求
当索引值不规则（如弹窗999、加载遮罩1000、全屏提示2147483647），硬套递归反而难维护。此时用.each()配合预定义列表更清晰：
@z-layers: tooltip 100, modal 999, overlay 1000, toast 1001;
.each(@z-layers, {
.z-@{value[0]} { z-index: @value[1]; }
});
这里@z-layers是二维列表，每项[name, value]；@value[0]取类名前缀，@value[1]取数值。Less 4.0+才支持这种写法，旧版需降级为一维列表+额外映射逻辑。
- 语义明确：类名和用途强绑定（
.z-modal比.z-2可读性高得多） - 数值可任意设置，不受数学规律约束
- 列表顺序即CSS输出顺序，但不会影响层叠效果——最终生效取决于具体选择器权重和DOM位置
生成的z-index类怎么用才不翻车
动态生成只是第一步，真正踩坑多在使用环节。核心原则：不要让z-index成为“魔法数字”的替代品。
- 避免在组件内部直接写
.z-modal { z-index: 999; }——应通过父容器层级传递，比如.app-modal { z-index: var(--z-modal); }再配合CSS自定义属性 - Less生成的类只负责提供原子值，具体组合靠BEM或Utility类拼装，例如
- 如果项目已用CSS-in-JS或Tailwind，Less生成的
z-类可能冗余，优先考虑运行时注入或@layer隔离最易被忽略的一点：
z-index生效前提是元素有定位（position值不为static）。Less生成再多类，没配position: relative照样无效。 - 如果项目已用CSS-in-JS或Tailwind，Less生成的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
