Sass在第N個項目循環

Question

我目前正在SASS for循環來循環第n個圖像（例如50）。對於每一種類型，我都希望將轉換延遲增加50ms。起點爲250ms，看起來目前工作中的for循環沒有遞增50ms，始終保持在250ms。

 $time: 250ms; 
     @for $i from 1 through 50 { 
      img:nth-of-type(#{$i}) { 
       transition-delay: $time(#{$i}) + 50ms; 
      } 
     } 

如果任何人有任何建議或可以伸出援手，那將不勝感激。先謝謝你。

Answer 1

我改變了一些邏輯來適應我的需求，但這裏是我的循環的修訂版本。

@mixin transitionDelay { 
    @for $i from 1 through 50 { 
    &:nth-of-type(#{$i}) { 
    transition-delay: #{$i * 45}ms; 
    } 
    } 
} 

Answer 2

$time: 250; 
@for $i from 1 through 50 { 
    img:nth-of-type(#{$i}) { 
     $itemType: $time + ($i - 1) * 50; 
     transition-delay: #{$itemType}ms; 
    } 
} 

你也許可以做到無輔助變量一樣，但我認爲這使事情變得更清潔。

Answer 3

如果你打算使用一個mixin，你可以使用默認參數

@mixin transitionDelay($default: 200) { 
    @for $i from 1 through 50 { 
    &:nth-of-type(#{$i}) { 
    transition-delay: #{($i * 50) + $default}ms; 
    } 
    } 
} 

然後包括它的參數...

.cool { @include transitionDelay(200); } 

或不

.cool { @include transitionDelay; }