在sass

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选择器内，你应该在.slide选择器内移动for循环，或者在for循环中移动.slide选择器，具体取决于你的偏好： / p>

#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;
          }
        }
    }
}