如何让SCSS循环根据实际项目数量生成类而非固定5个？

方法一：用Sass变量动态控制循环范围 #

把原代码里固定的5换成可配置变量，调整项目数量时只需修改变量值，就能自动生成对应数量的样式类：

// 根据实际项目数量修改这个变量
$total-items: 6;

@for $num from 1 through $total-items {
  .item-#{$num} {
    transform-origin: top center;
    animation: rotateX 300ms ($num * 60ms) ease-in-out forwards;
  }
  .item-#{$num} + .item-last {
    transform-origin: top center;
    animation: rotateX 300ms (($num + 1) * 60ms) ease-in-out forwards;
  }
}

// 补充rotateX动画定义（根据需求调整最终状态）
@keyframes rotateX {
  to {
    transform: rotateX(0deg);
  }
}

比如要做8个item，就把$total-items改成8，循环会自动生成.item-1到.item-8的样式。

方法二：用CSS自定义属性+JS适配任意数量（无需预定义循环） #

如果不想每次修改Sass变量，可通过CSS自定义属性结合JS动态计算索引，彻底摆脱固定循环的限制：

先调整HTML结构（无需手动加索引类）：

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<!-- 可无限添加更多item -->
<div class="item-last">最后一项</div>

再写通用CSS样式：

.item {
  transform-origin: top center;
  animation: rotateX 300ms calc(var(--item-index) * 60ms) ease-in-out forwards;
}

.item + .item-last {
  transform-origin: top center;
  animation: rotateX 300ms calc((var(--item-index) + 1) * 60ms) ease-in-out forwards;
}

@keyframes rotateX {
  to {
    transform: rotateX(0deg);
  }
}

最后用JS给每个item动态设置索引变量：

document.querySelectorAll('.item').forEach((itemEl, index) => {
  // 索引从1开始，和原代码逻辑保持一致
  itemEl.style.setProperty('--item-index', index + 1);
});

这种方式不管加多少个item，JS都会自动计算索引，CSS根据索引生成对应动画延迟，完全适配任意数量的项目。

内容的提问来源于stack exchange，提问作者Kitten