sassの反復で@forループを作成する

Question

私は反復処理でループを作ろうとしています。 これは私の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; 
} 

私ははっきりとどのように言ったことを、オンラインでどんな答えを見つけるのdidnt @forループを正しく書く。私は古い.sassで束を見つけましたが、私は初心者なので、それを.scssにどのように翻訳するのか分かりません。

Answer 1

出力に、＃forループが#slideshowセレクタの内側に配置されていると仮定すると、.slideセレクタ内でforループを移動するか、またはforループで.slideセレクタを移動する必要があります。

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