css - 在sass中使用迭代制作@for循环

Question

我正在尝试使用 sass 迭代创建一个循环。 这是我的 scss 代码:

@for $i from 1 through 4{
  &:nthchild(#{$i}){
    animation: xfade 24s 24s - $i * 6 infinite;
  }
}

这是我的输出:

#slideshow:nthchild($i) {
  -webkit-animation: xfade 24s 23s infinite;
  animation: xfade 24s 23s infinite;
}

#slideshow:nthchild($i) {
  -webkit-animation: xfade 24s 22s infinite;
  animation: xfade 24s 22s infinite;
}

#slideshow:nthchild($i) {
  -webkit-animation: xfade 24s 21s infinite;
  animation: xfade 24s 21s infinite;
}

#slideshow:nthchild($i) {
  -webkit-animation: xfade 24s 20s infinite;
  animation: xfade 24s 20s infinite;
}

这是我想要的结果:

#slideshow .slide:nth-child(1) {
-webkit-animation: xfade 24s 18s infinite;
animation: xfade 24s 18s infinite;
}
#slideshow .slide:nth-child(2) {
-webkit-animation: xfade 24s 12s infinite;
animation: xfade 24s 12s infinite;
}
#slideshow .slide:nth-child(3) {
-webkit-animation: xfade 24s 6s infinite;
animation: xfade 24s 6s infinite;
}
#slideshow .slide:nth-child(4) {
-webkit-animation: xfade 24s 0s infinite;
animation: xfade 24s 0s infinite;
}

我没有在网上找到任何清楚说明如何正确编写@for 循环的答案。我在旧的 .sass 中找到了一堆，但我不知道如何将其转换为 .scss，因为我是新手。

Answer 1

假设输出显示 @for 循环位于 #slideshow 选择器内，您应该将 for 循环移动到 .slide 选择器内，或者将 .slide 选择器移动到 for 循环内，具体取决于您的偏好:

#slideshow {
    @for $i from 1 through 4{
      & .slide:nthchild(#{$i}){
        animation: xfade 24s 24s - $i * 6 infinite;
      }
    }
}

或

#slideshow {
    .slide {
        @for $i from 1 through 4{
          &:nthchild(#{$i}){
            animation: xfade 24s 24s - $i * 6 infinite;
          }
        }
    }
}