<p>Sass 中 $i * 0.1s 报错因不支持数字与单位直接运算，须用 math.div($i, 10) + 's' 或插值；nth-child 错位需用 data-index 或确保 DOM 连续；delay 步长宜 0.05–0.2s，总跨度≤1.5倍 duration；负 delay 可实现倒播启动。</p>
为什么直接写 $i * 0.1s 会报错？
Sass 编译器不支持把数字和单位（如 s）在算术表达式里混用，$i * 0.1s 会被当成「数字乘字符串」，编译直接失败，报错类似：Invalid CSS after "...: $i * 0.1s": expected expression。必须显式构造带单位的值。
正确做法是先算纯数字，再用 unit() 或 #{} 插值拼接，但更稳妥的是用 math.div($i, 10) + s（Sass 1.33+）或老版本用 ($i / 10) + 's'（注意加引号，且需配合 unquote() 才能生成合法 CSS 值）。
实际推荐写法（兼容 Sass ≥ 1.20）：
@use "sass:math";
<p>@for $i from 1 through 5 {
.item:nth-child(#{$i}) {
animation-delay: #{math.div($i, 10)}s;
}
}
@for 循环中如何避免 nth-child 索引错位？
HTML 列表项如果开头有非 .item 元素（比如标题、空 <div>），:nth-child(#{$i}) 就会匹配错——它数的是父容器里的所有子元素序号，不是第几个 .item。
立即学习“前端免费学习笔记（深入）”；
解决方法只有两个：
- 确保目标元素在 DOM 中连续且无干扰兄弟节点（最简单，但不总是可控）
- 改用
:nth-of-type()（仅当所有.item是同种标签，如全是<li>） - 更通用：用
data-index属性 + 属性选择器，例如[data-index="#{$i}"]，并在 HTML 中手动或 JS 注入索引
动画延迟叠加时，animation-duration 和 delay 的关系怎么把握？
延迟时间不是孤立存在的，它和动画本身时长共同决定视觉节奏。比如你设了 animation-duration: 0.4s，又给第 10 个元素加 animation-delay: 0.9s，那它其实在第 1.3 秒才完成；但如果 delay 太大（比如 2s），用户可能根本没注意到它开始。
实用建议：
- delay 步长建议控制在
0.05s ~ 0.2s区间，太小看不出差异，太大显得断续 - 总延迟跨度（即
max-delay - min-delay）最好 ≤ 动画自身时长的 1.5 倍，否则队列感断裂 - 若用
animation-fill-mode: forwards，注意延迟结束后元素会立刻跳到结束态，可能掩盖过渡效果
用 @each 替代 @for 是否更安全？
可以，但没必要。如果你只是按顺序编号分配 delay，@for 更直接；@each 适合延迟值不规则的情况，比如想让第 2 个停顿久一点、第 4 个快一点。
示例（不规则 delay）：
$delays: 0.1s, 0.6s, 0.2s, 0.8s, 0.3s;
<p>@each $delay in $delays {
.item:nth-child(#{$i}) {
animation-delay: $delay;
}
$i: $i + 1;
}注意：Sass 里 @each 不自带索引，得手动维护计数器 $i，反而容易出错。真要动态控制，不如用 map + @each $key, $val in $map。
真正容易被忽略的点是：CSS 动画的 animation-delay 支持负值，意味着可以「倒播启动」——比如 -0.2s 会让动画从 20% 进度处开始，这个技巧常被遗忘，但对无缝循环或错峰入场很有用。
