如何通过CSS自动生成带对应z-index值的layer编号类？

如果不想手动逐个定义所有.layerN类，可以分两种场景实现：

一、用CSS预处理器（推荐） #

原生CSS本身没有循环语法，但Sass、Less这类预处理器支持循环逻辑，能自动批量生成所需的类规则。

Sass 实现 #

// 配置参数：要生成的类总数、起始z-index值
$total-layers: 10;
$initial-z: 10;

@for $i from 1 through $total-layers {
  .layer#{$i} {
    z-index: $initial-z - ($i - 1);
  }
}

编译后会直接输出你需要的代码：.layer1对应z-index:10，.layer2对应z-index:9，以此类推。

Less 实现 #

@total-layers: 10;
@initial-z: 10;

// 递归循环生成类
.loop(@i) when (@i <= @total-layers) {
  .layer@{i} {
    z-index: @initial-z - (@i - 1);
  }
  .loop(@i + 1);
}
.loop(1);

二、纯原生CSS方案 #

原生CSS没有循环，但可以通过属性选择器+CSS变量减少重复代码，不过还是需要为每个类声明对应变量（比写完整规则简洁很多）：

:root {
  --base-z: 11; // 计算基准值，确保layer1的z-index为10
}

// 匹配所有以layer开头的类
[class^="layer"] {
  z-index: calc(var(--base-z) - var(--layer-num));
}

// 为每个类绑定对应的编号变量
.layer1 { --layer-num: 1; }
.layer2 { --layer-num: 2; }
.layer3 { --layer-num: 3; }
// ... 按需添加到.layer10

这样修改--base-z就能统一调整所有z-index的起始值，修改--layer-num即可单独调整某个类的层级。

内容的提问来源于stack exchange，提问作者Adam B.