Sass 我如何重写这个使用@for循环的SCSS Mixin

我需要一个scss混音器的帮助。我试图通过在mixin中使用for循环，使用n:child（）选择器添加动画延迟。每个子级上的延迟应以0.5秒的增量增加

li {
    list-style: none;
    transform: translateX(100rem);
    animation: slideIn .5s forwards;

    &:nth-child(1) {
      animation-delay: 0s;
    }

    &:nth-child(2) {
      animation-delay: .5s;
    }

    &:nth-child(3) {
      animation-delay: 1s;
    }

    &:nth-child(4) {
      animation-delay: 1.5s;
    }
}

我用混音器替换了原来的SCS。请注意，上面的第一个孩子的动画延迟为0秒

@mixin delay {
    @for $i from 1 through 4 {
        &:nth-child(#{$i}) {
            animation-delay: $i * (0.5s);
        }
    }
}

最后的代码

li {
    list-style: none;
    transform: translateX(100rem);
    animation: slideIn .5s forwards;
    @include delay;
}

---

这很好，只是会给第一个孩子增加延迟。如何重写此混音，使其跳过第一个子项并从第二个子项开始？

您可以从2循环到4（正如@mfluehr所说的，这是他的评论，因为默认情况下

动画延迟

为0=>），将

（$I-1）

添加到

动画延迟

所以，这可能是你的新混音：

@mixin delay {
    @for $i from 2 through 4 {
        &:nth-child(#{$i}) {
            animation-delay: ($i - 1) * (0.5s);
        }
    }
}

li {
    list-style: none;
    transform: translateX(100rem);
    animation: slideIn .5s forwards;
    @include delay;
}

您的输出：

li {
  list-style: none;
  transform: translateX(100rem);
  animation: slideIn 0.5s forwards;
}
li:nth-child(2) {
  animation-delay: 0.5s;
}
li:nth-child(3) {
  animation-delay: 1s;
}
li:nth-child(4) {
  animation-delay: 1.5s;
}

我还添加了一个新的CSS示例，其中没有

li:n子项（1）

：

li{
列表样式：无；
转换：translateX（100rem）；
动画：slideIn.5s向前；
}
李：第n个孩子（2）{
动画延迟：0.5s；
}
李：第n个孩子（3）{
动画延迟：1s；
}
李：第n个孩子（4）{
动画延迟：1.5s；
}
@关键帧幻灯片{
100%{transform:translateX（0）；}
}

一,
二,
三,
四,

@从2到4的$i

我试过了，但没有达到预期效果。这只会给第二个孩子增加更长的延迟时间。这很有效！当我尝试循环2到4时，我没有包括（$I-1）。你愿意帮我理解那一行代码吗？我想我不明白为什么在指定2到4时需要添加该部分。当然。因为您希望第二个li以0.5s no 1s（2*0,5=1）的延迟开始。为此，我们必须在每个循环（2-1=1，然后1*0.5=0.5；3-1=2，然后2*0,5=1；4-1=3，然后3*0,5=1,5…）中删除一个单位$i，这是有意义的。只是需要一些练习才能使我的头脑清醒过来。