CODEWITHSUNDEEP
cssfor-loopsass
Buckk
Buckk

Reputation: 51

Sass For Loop over Nth Items

I'm currently working on a SASS for loop to loop over nth images(50 for example). For every nth-of-type I'd like to increase the transition delay by 50ms. The starting point is 250ms and it seems that the for loop I currently have in the works is not incrementing by 50ms and remains at 250ms at all times. 

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

If anyone has any suggestions or could lend a hand, that would be greatly appreciated. Thank you in advance.

Upvotes: 2

Views: 1697

Answers (3)

Ari
Ari

Reputation: 1703

If you're going to use a mixin, you can use a default argument

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

Then include it with an argument...

.cool { @include transitionDelay(200); }

or without

.cool { @include transitionDelay; }

Upvotes: 2

MarcinJuraszek
MarcinJuraszek

Reputation: 125660

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

You could probably achieve the same without a helper variable, but I think it makes things cleaner.

Upvotes: 1

Buckk
Buckk

Reputation: 51

I changed some of the logic to accommodate my needs but here's a revised version of my loop. 

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

Upvotes: 0

Related Questions