Sass For 循环第 N 个项目答案

【问题标题】：Sass For Loop over Nth ItemsSass For 循环第 N 个项目
【发布时间】：2017-09-05 10:43:43
【问题描述】：

我目前正在使用 SASS for 循环来循环第 n 个图像（例如 50 个）。对于每第 n 个类型，我想将转换延迟增加 50 毫秒。起点是 250 毫秒，似乎我目前正在使用的 for 循环没有增加 50 毫秒，并且始终保持在 250 毫秒。

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

如果有人有任何建议或可以伸出援助之手，将不胜感激。先感谢您。

【问题讨论】：

标签： css for-loop sass

【解决方案1】：

如果你要使用 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; }

【讨论】：

太棒了，甚至没有考虑到这一点。谢谢！

【解决方案2】：

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

如果没有辅助变量，您可能也可以达到同样的效果，但我认为这会让事情变得更简洁。

【讨论】：

【解决方案3】：

我更改了一些逻辑以适应我的需要，但这里是我的循环的修订版本。

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

【讨论】：