Sass For Nop Items

Question

私は現在、n番目の画像（たとえば50枚）をループするためにSASS forループを作成しています。タイプごとに、移行遅延を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 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; } 

なし