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