在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選擇器中，您應該根據您的首選項移動.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; 
      } 
     } 
    } 
}