Question

尝试创建一个mixin，以循环遍历.item的每个第n个子项

这是我下面的内容。

#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;
  }
}

我确实在这里看到了类似的内容，How to use SCSS/SASS to increase animation-delay for concurrent divs

Answer 1

您不需要这样做。@for directive应该适合您的需求。

#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

Sass mixin用于循环动画

1 个答案: