Sass循环为元素分配相同动画延迟问题排查

核心问题 #

你的选择器逻辑错误：
每个.contact-item内部，.contact-link是第3个子元素（前面包含.contact-header-wrapper、.contact-text两个元素），所以你的循环中：

• 当$i=3时，#contact-grid .contact-item .contact-link:nth-child(3)会匹配所有.contact-link元素
• 而$i=1/2/4/5的选择器找不到任何对应元素
  最终所有.contact-link都被$i=3的规则覆盖，延迟统一变成3s。

修正后的Sass循环 #

把选择器的目标从.contact-link的子元素序号，改为.contact-item的序号：

@for $i from 1 through 5 {
    #contact-grid .contact-item:nth-child(#{$i}) .contact-link {
        @include textShakeAnimation($delay: #{$i}s);
    }
}

原理说明 #

修改后循环会定位到#contact-grid下的第N个.contact-item，再选中它内部的.contact-link，这样每个.contact-link都会拿到对应$i值的延迟，不会出现规则覆盖问题。

验证建议 #

检查生成的CSS，会看到每个.contact-item:nth-child(N) .contact-link都有独立的animation-delay值，刷新页面即可看到元素按顺序延迟晃动的效果。

内容的提问来源于stack exchange，提问作者alpha758