SCSS中无法真正递归，必须用@for迭代替代，否则编译报错；正确做法是先用@function生成延迟map，再用@mixin配合@each和:nth-child输出CSS规则，避免nth-of-type错位、visibility隐藏导致跳帧及iOS Safari卡顿。
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;
}
}
}
}调用示例：
.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更可靠？
如果容器里混有其他类型元素（比如<span></span>、<div class="spacer">），用<code>nth-of-type会导致延迟错位——它只计同类型标签，而nth-child按DOM顺序严格计数。动画序列依赖的是渲染顺序，不是语义类型。
另一个坑：不要给.loader-item加display: inline之类影响布局的属性，否则nth-child可能因换行/折叠失效。确保它们是连续、无干扰的兄弟节点。
- 务必让所有目标元素是同一父容器下的直系子元素
- 避免用
visibility: hidden隐藏中间项——它仍占nth-child位置，但动画不可见，造成“跳帧”假象 - 若需动态增删项，纯CSS方案无法响应；此时应改用JS控制
style.animationDelay
移动端iOS Safari里动画卡顿怎么办？
旧版iOS Safari对animation-delay大量叠加敏感，尤其当$steps > 12时，可能出现首帧卡顿或延迟不生效。根本原因是浏览器对单个元素上大量nth-child规则的解析开销激增。
缓解方式：
- 把
$steps控制在8以内，用opacity+transform代替animation实现轻量入场 - 对长列表，改用
will-change: transform提前提示渲染层 - 避免在
@keyframes里写background-color渐变——重绘开销高，优先用opacity和scale
真正复杂场景（比如瀑布流加载、滚动触发动画），别硬扛SCSS生成，该交JS就交JS——CSS预处理器不是万能胶。
