不能只靠硬写transition-delay是因为维护成本高，必须用SCSS的@for循环结合:nth-child(n)批量生成阶梯延迟规则，且transition必须定义在基础选择器而非:hover中。
悬停延迟阶梯触发为什么不能只靠 transition-delay 硬写
直接给每个元素写 transition-delay: 0.1s、transition-delay: 0.2s 看似可行，但维护成本高——增删项就得手动改一串数字，SCSS 的循环能力在这里不是炫技，是刚需。关键点在于：延迟值必须和元素顺序强绑定，而 :nth-child(n) 是唯一能稳定锚定 DOM 顺序的 CSS 机制，SCSS 循环只是帮它批量生成规则。
用 @for 循环 + :nth-child(n) 生成阶梯 delay
核心思路是让 SCSS 生成形如 .item:nth-child(1) { transition-delay: 0s; }、.item:nth-child(2) { transition-delay: 0.1s; } 的规则。注意两点：延迟值从 0 开始（第一个元素不延迟），且单位必须显式写出；:nth-child(n) 的 n 必须是具体数字，不能写成 :nth-child($i) —— 这是常见错误。
@for $i from 1 through 5 {
.item:nth-child(#{$i}) {
transition-delay: ($i - 1) * 0.1s;
}
}- 变量插值必须用
#{$i}，否则编译报错 -
($i - 1)保证第一个元素延迟为 0，避免首项卡顿 - 若实际元素超过 5 个，需同步调整
through 5的上限
悬停动画本身要声明在基础选择器上
阶梯延迟只是控制“何时开始动”，动画效果（比如缩放、颜色变化）必须定义在未悬停的基础状态里，否则 transition-delay 不生效。很多人把动画写在 :hover 里，结果发现延迟没作用——因为浏览器只对属性变化过程做过渡，不是对伪类切换做延迟。
.item {
transform: scale(1);
transition: transform 0.3s ease, background-color 0.3s ease;
// 这里必须声明 transition，且包含所有要动的属性
}
<p>.item:hover {
transform: scale(1.1);
background-color: #007bff;
}-
transition属性必须写在非:hover的基础选择器中 - 如果只写
transition: all 0.3s，可能触发不必要的重排，建议显式列出属性 - SCSS 循环只负责
transition-delay，别把它和动画逻辑混在一起
兼容性与性能注意点
:nth-child(n) 在 IE9+ 支持良好，但若项目需兼容 IE8，得用 JS 动态加 class 替代；另外，大量循环（比如 through 100）会让 CSS 文件体积明显增大，实际项目中建议用 min() 函数限制上限，或改用 CSS 自定义属性 + JS 控制。
立即学习“前端免费学习笔记（深入）”；
- SCSS 编译后生成的是静态 CSS，没有运行时开销，但文件体积会随循环次数线性增长
- 移动端要注意
transform触发硬件加速，但background-color过渡仍走 CPU，频繁触发可能掉帧 - 如果列表动态增减，纯 CSS 方案无法自动适配，此时必须切到 JS 驱动的延迟队列
真正难的不是写循环，而是想清楚：这个延迟是给用户看的节奏感，还是解决视觉干扰？前者可以微调毫秒级差值，后者可能换成交互反馈更直接。
