CODEWITHSUNDEEP
sassmixins
David R
David R

Reputation: 193

Sass mixin for looping animations

Trying to create a mixin for looping through each nth-child of .item

Here is what I have below.

#case-studies .item {
  animation: card__moveIn 2s cubic-bezier(.22,1,.32,1) var(--delay) backwards;

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

  &:nth-child(2) {
    --delay: 1.1666666666666665s;
  }

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

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

  &:nth-child(5) {
    --delay: 1.6666666666666665s;
  }

  &:nth-child(6) {
    --delay: 1.8333333333333335s;
  }

  &:nth-child(7) {
    --delay: 2s;
  }

  &:nth-child(8) {
    --delay: 2.166666666666667s;
  }

  &:nth-child(9) {
    --delay: 2.3333333333333335s;
  }

  &:nth-child(10) {
    --delay: 2.5s;
  }

  &:nth-child(11) {
    --delay: 2.6666666666666665s;
  }

  &:nth-child(12) {
    --delay: 2.8333333333333335s;
  }

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

I did see something similar here, How to use SCSS/SASS to increase animation-delay for concurrent divs

Upvotes: 2

Views: 93

Answers (1)

Quentin
Quentin

Reputation: 3289

You don't need a mixin for that.The @for directive should fit your needs.

#case-studies .item {
  animation: card__moveIn 2s cubic-bezier(.22,1,.32,1) var(--delay) backwards;
}

@for $i from 1 through 13 {
  #case-studies .item:nth-child(#{$i}) {
    --delay: #{(1 + 0.1667 * ($i - 1))}s;
  }
}

You can see the output here

Upvotes: 1

Related Questions