Question

我目前正在使用SASS for循环来遍历第n个图像（例如50个）。对于每个类型的第n个，我希望将转换延迟增加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

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

如果没有辅助变量，你可能会达到同样的效果，但我认为它可以让事情更清晰。

Answer 2

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

Answer 3

我改变了一些逻辑以满足我的需求，但这是我的循环的修订版本。

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

Sass For Nth Items上的循环

3 个答案: