动画延迟n次子迭代的增量

Question

尝试设置一个包含多个元素的动画，这些元素循环遍历一组12个元素，其中除第一个元素之外的每个子元素的动画延迟都为i * 0.5。

有没有办法可以使用SCSS for-loop，而不必为每个子元素输出animation-delay: X？

Answer 1

This should do what you're looking for:

@for $i from 1 through 12 {
  .yourclass:nth-child(#{$i}) {
    animation-delay: $i * 0.5;
  }
}