CSS中Less如何快速生成一份常用Z-index层级表_变量列表与Map应用

用@z-index-map配合.each()生成变量和CSS类更易维护，避免重复与遗漏；Map需字符串key、数字value、留空隙；集中管理便于校验和调试。

Less里用Map定义z-index层级比写一堆变量更可靠

直接说结论：用 @z-index-map 配合 .each() 循环生成变量，比手写 @z-index-modal: 1000、@z-index-tooltip: 999 等一长串更易维护，也避免漏掉中间层级或重复赋值。Less 3.5+ 原生支持 Map（即对象字面量），无需额外插件。

怎么写一个可遍历的z-index Map结构

关键不是“存数据”，而是让 Map 的 key 和 value 都能被后续逻辑消费。推荐按「语义分组 + 数值递增」组织，比如弹层类统一高位，浮层类次之，固定元素最低：

@z-index-map: {  "overlay": 9999,  "modal": 9998,  "popover": 9997,  "tooltip": 9996,  "dropdown": 9995,  "sticky-header": 100,  "fixed-footer": 90};

注意三点：

• key 必须是字符串（加引号），否则 Less 解析失败
• value 必须是数字，不能带单位（px 会报错）
• 层级数值建议留出空隙（如 9999→9998→9997），方便后期插入新层级

用.each()把Map转成可用变量和CSS类

Less 自带的 .each() 混合宏能遍历 Map 并生成变量与工具类。不用自己写递归函数：

立即学习“前端免费学习笔记（深入）”；

.each(@z-index-map, {  @key: @key;  @value: @value;  @var-name: ~"@{key}-z";  @{var-name}: @value;  .z-@{key} {    z-index: @value;  }});

执行后自动产出：

• 变量：@overlay-z: 9999、@modal-z: 9998… 可在其他样式中直接引用
• CSS类：.z-overlay { z-index: 9999; }，适合快速调试或低侵入式覆盖
• 如果 Map 里有 "sticky-header"，生成的类是 .z-sticky-header，符合 BEM 习惯

为什么不用@import拼接多个z-index文件

常见误区是把不同模块的 z-index 拆成 z-modal.less、z-tooltip.less 单独引入。问题在于：

• 加载顺序影响最终值 —— 后 import 的会覆盖前面同名变量
• 无法全局校验层级是否重叠（比如两个模块都设了 @z-index-dropdown: 9995）
• 调试时要跳转多个文件，而 Map 集中在一处，一眼看出 gaps 和 spikes
• CI/CD 中难做静态检查（比如用 postcss-less-checker 扫描 Map 结构比扫散落变量容易）

真正复杂的点在于：Map 的 key 名必须和业务组件命名对齐，比如用了 toast 就别在 JS 里又叫 notification；否则变量生成了，没人记得调用 @toast-z。这个一致性得靠团队约定，Less 本身管不了。