Help with SCSS Mixin that uses a @for loop.

Question

Hello

I need need some help with a Mixin. I am trying to add an animation delay using nth:child() selectors by utilizing a for loop.

The original scss:

li {
    list-style: none;
    transform: translateX(100rem);
    animation: slideIn .5s forwards;

    &:nth-child(1) {
      animation-delay: 0s;
    }

    &:nth-child(2) {
      animation-delay: .5s;
    }

    &:nth-child(3) {
      animation-delay: 1s;
    }

    &:nth-child(4) {
      animation-delay: 1.5s;
    }

Please note there is 0s seconds delay on the first child.

I wrote a mixin

@mixin delay {
    @for $i from 1 through 4 {
        &:nth-child(#{$i}) {
            animation-delay: $i * (0.5s);
        }
    }
}

Then I used the include method

li {
    list-style: none;
    transform: translateX(100rem);
    animation: slideIn .5s forwards;
   @include delay;
}

This works fine except it is adding a delay to the first child. How do I write this mixin so it will skip the first child and begin on the second child?

Answer 1 · 2019-09-17T01:08:57Z

September 17, 2019 1:08am

Make your loop range from 0 to 3, not 1 to 4.

EDIT: I'm not sure what your experience is with other programming languages, but starting from 0 in a loop is standard for most, if not all of them. I know the SCSS curriculum here teaches starting at 1, and in most cases it's fine (for SCSS). Just wanted to give you a heads-up in case it sounded strange to start at 0 🙂

Welcome to the Treehouse Community

Looking to learn something new?

Kent Hefley

Kent Hefley

Help with SCSS Mixin that uses a @for loop.

1 Answer

Zak Erving

Zak Erving