SCSS递归函数不能直接生成CSS规则，generate-delays等函数仅返回map或list数据结构，必须用@each遍历并配合&:nth-child(#{$key})生成独立样式规则。
SCSS递归函数不能直接生成CSS规则
SCSS里没有真正意义上的“递归函数”能自动展开成多条CSS声明——generate-delays这类函数只返回map或list，是纯数据结构，不产出任何CSS。你必须显式用@each或@for遍历它，再配合&:nth-child(...)之类选择器生成样式。常见错误是把函数调用写在属性值里就以为完事了，比如：animation-delay: generate-delays(5);，这会直接报错，因为函数返回的是map，不是时间值。
@each 遍历 map 是唯一可靠方式
拿到generate-delays($steps)返回的map后，必须用@each $key, $value in $delays逐项提取键值对。键（$key）通常是序号，值（$value）才是animation-delay要设的时间。注意两点：
-
@each必须在有父选择器的上下文中使用，否则&无法正确展开 - 不能用
@for $i from 1 to $steps去“猜”键名，因为map的键可能不连续或不是数字 - 务必加
@if type-of($key) == 'number'判断，避免map里混入非数字键导致编译失败
用 &:nth-child(#{$key}) 生成独立选择器
想让每个子元素获得不同延迟，就得为每个$key生成一条独立CSS规则，最稳妥的方式是&:nth-child(#{$key})。它依赖于父选择器&的存在，所以这个@mixin必须被@include在某个选择器块内，例如.stagger-list { @include stagger-delay(6); }。不要试图拼接字符串选择器（如.item-#{$key}），那只会生成无效CSS，浏览器根本不会识别。
示例调用：
立即学习“前端免费学习笔记（深入）”；
.card-list {
@include stagger-delay(4, 0.2s, 0.15s);
}
会输出：
.card-list:nth-child(1) { animation-delay: 0.2s; }
.card-list:nth-child(2) { animation-delay: 0.35s; }
.card-list:nth-child(3) { animation-delay: 0.5s; }
.card-list:nth-child(4) { animation-delay: 0.65s; }
性能与可维护性比“炫技递归”重要得多
所谓“复杂阶梯动画”，往往只是延迟、持续时间、贝塞尔曲线三者组合。硬写递归函数反而增加理解成本和调试难度。更实际的做法是：
- 用
@function只做纯计算（如延迟序列、缓动系数数组） - 把样式生成逻辑全交给
@mixin，保持职责分离 - 避免在
@function里嵌套@for再套@each，SCSS编译器不优化这种嵌套，容易卡死或爆栈 - 如果阶梯逻辑涉及条件分支（比如奇数项延迟翻倍），优先用
@if+@each，而不是试图用递归模拟
真正容易被忽略的是：这些延迟值最终要和@keyframes的持续时间对齐，否则动画会错位。别只盯着函数怎么写，先确认animation-duration是否固定、是否所有元素都用同一个@keyframes。
