SCSS递归函数生成阶梯式延迟CSS加载动画

SCSS生成阶梯延迟动画的正确方法

在实际项目中，用SCSS去模拟递归其实是个伪命题。SCSS没有真正的运行时栈，它的“递归”本质上是通过迭代展开的循环。如果强行写一个@return my-function($n - 1)这样的逻辑，编译时必定会报Stack overflow: maximum nesting level reached——这跟语言本身的限制有关，不是代码写得不够“聪明”。

正确做法其实很简单：把递归逻辑转成迭代逻辑，用@for从1到$steps逐层生成一个延迟map就好。这个map只作为数据准备阶段，不输出任何CSS。

@function generate-delays($steps, $base: 0.1s, $increment: 0.1s) {
  $result: ();
  @for $i from 1 through $steps {
    $delay: $base + ($i - 1) * $increment;
    $result: map-merge($result, (nth: $i, delay: $delay));
  }
  @return $result;
}

拿到这个map之后，下一步才是真正的CSS输出环节。这里最容易踩的坑是：试图在@for里直接拼选择器字符串，结果生成了无效的CSS规则（比如.item:nth-child(1)没有被解析为真正的选择器）。正确的做法是用@each配合nth-child()来展开。

下面这个mixin专门负责这件事：

@mixin stagger-delay($steps, $base: 0.1s, $increment: 0.1s) {
  $delays: generate-delays($steps, $base, $increment);
  @each $key, $value in $delays {
    @if type-of($key) == 'number' {
      &:nth-child(#{$key}) {
        animation-delay: $value;
      }
    }
  }
}

调用起来很直观：

.loader-item {
  animation: fade-in 0.3s ease-out;
  @include stagger-delay(5, 0.1s, 0.08s);
}

编译后生成的CSS是这样的：

.loader-item:nth-child(1) { animation-delay: 0.1s; }
.loader-item:nth-child(2) { animation-delay: 0.18s; }
.loader-item:nth-child(3) { animation-delay: 0.26s; }
/* ... */

为什么nth-child比nth-of-type更可靠？

这里有个坑需要注意：如果容器里混了其他类型的元素（比如一个或者一个