应直接用 @for 循环生成 animation-delay，因其语义清晰、编译稳定、避免栈溢出；递归函数无法输出 CSS 规则、需额外 mixin 封装、调试困难且无尾调用优化。
直接用 @for 就够了，不需要函数递归——Sass 里写递归函数生成 animation-delay 是绕远路，还容易栈溢出或编译失败。
为什么不该用函数递归生成 delay 规则
Sass 函数（@function）只能返回值，不能输出 CSS 规则；想靠它“生成选择器+样式”，必须配合 @mixin 或 @content，但最终仍要靠循环展开。而 @for 本身就能直接输出规则块，语义清晰、编译稳定、调试直观。
- 递归函数在 Sass 中没有尾调用优化，项数稍大（比如 >20）就可能触发编译器栈深度限制
- 函数无法访问当前元素在 DOM 中的位置，你得手动传入索引，反而增加调用复杂度
- 生成的 CSS 规则必须嵌套在 mixin 里调用，多一层抽象，出错时定位更难
@for 生成 delay 的标准写法与关键参数
核心是控制起始偏移、步长、选择器类型和单位一致性。例如 6 个列表项，每项延迟递增 0.15s：
@for $i from 1 through 6 {
li:nth-of-type(#{$i}) {
animation-delay: #{($i - 1) * 0.15}s;
}
}-
$i - 1确保首项延迟为0s，不是0.15s - 用
nth-of-type而非nth-child，避免因 HTML 中混入注释、空格文本节点导致错位 -
#{...}s插值必须带单位（s或ms），否则编译报错：Invalid CSS after "...y: #{$i * 0.15}": expected "}", was ";" - 步长建议用小数（如
0.15），整数秒（1s）会让动画显得生硬
如何让 delay 动态适配不同数量的元素
硬编码 through 6 不灵活。推荐抽成变量，配合 @mixin 复用：
立即学习“前端免费学习笔记（深入）”；
$stagger-count: 8;
$stagger-step: 0.12s;
<p>@mixin stagger-delay($selector: li, $count: $stagger-count, $step: $stagger-step) {
@for $i from 1 through $count {</p><h1>{$selector}:nth-of-type(#{$i}) {</h1><pre class="brush:php;toolbar:false;"> animation-delay: #{($i - 1) * $step};
}} }
@include stagger-delay("article.card", 5, 0.2s);
- 变量命名要带语义（
$stagger-step比$delay-unit更易懂） -
#{$selector}允许传入任意选择器，不只是li - 注意
animation-delay值末尾没写单位——因为$step已含单位（0.12s），重复加s会出错
容易被忽略的动画终态问题
只设 animation-delay 不够，元素动画播完会闪回初始状态。必须显式加 animation-fill-mode: forwards 或简写进 animation 声明：
li {
animation: fadeIn 0.4s ease-out forwards;
}
<p>@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}-
forwards不是可选——它让元素停在to关键帧状态，否则用户会看到“淡入后突然消失” - 不要把
animation-fill-mode单独写在循环里，重复声明浪费编译体积，统一写在基础样式中即可 - 如果用了
opacity: 0初始态，记得同时设visibility: hidden防止占位空白影响布局
真正麻烦的不是生成 delay，而是确保每个元素都命中正确的伪类、终态不丢失、单位不拼错——这些细节比语法本身更容易导致动效失效。
