如何使用SCSS递归函数生成阶梯式延迟的CSS加载动画？-css教程-PHP中文网

scss中无法真正递归，必须用@for迭代替代，否则编译报错；正确做法是先用@function生成延迟map，再用@mixin配合@each和:nth-child输出css规则，避免nth-of-type错位、visibility隐藏导致跳帧及ios safari卡顿。

如何使用scss递归函数生成阶梯式延迟的css加载动画？

SCSS递归函数怎么写才不会爆栈？

SCSS的@function不支持真正的递归调用（编译时展开，无运行时栈），所谓“递归”其实是通过@for或@while模拟的循环展开。直接写@return my-function($n - 1)会导致编译报错：Stack overflow: maximum nesting level reached。

正确做法是用@for从1到$steps逐层生成规则，把“递归逻辑”转为迭代逻辑：

@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——它只是数据准备阶段。真正输出样式要另写@mixin来遍历。

怎么用`@each`把延迟值写进`animation-delay`？

拿到generate-delays()返回的map后，必须用@each展开，否则无法生成多条CSS规则。常见错误是试图在@for里直接拼选择器字符串，结果生成无效CSS（比如.item:nth-child(1)没被解析为真实选择器）。

推荐写法：用nth-child()伪类配合@each生成独立规则：

@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;
      }
    }
  }
}

调用示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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; }
/* ... */