在 SCSS 中迭代变量？

Question

我正在编写一个函数来按顺序淡入项目...

.sequenced-images li:nth-child(2) {
  animation-delay: 1s;
}
.sequenced-images li:nth-child(3) {
  animation-delay: 2s;
}
.sequenced-images li:nth-child(4) {
  animation-delay: 3s;
}
.sequenced-images li:nth-child(5) {
  animation-delay: 4s;
}

我有很多项目，我不想为下一个项目手动添加 class。

我可以使用诸如...之类的方法迭代同一规则吗？

.sequenced-images li:nth-child(i++) {
  animation-delay: i++s;
}

?

Answer 1

是的，你可以使用 for loop and string interpolation:

@for $i from 2 through 5 {
  .sequenced-images li:nth-child(#{$i}) {
    animation-delay: '#{$i - 1}s';
  }
}

这将导致：

.sequenced-images li:nth-child(2) {
  animation-delay: "1s";
}

.sequenced-images li:nth-child(3) {
  animation-delay: "2s";
}

.sequenced-images li:nth-child(4) {
  animation-delay: "3s";
}

.sequenced-images li:nth-child(5) {
  animation-delay: "4s";
}

在 SCSS 中迭代变量？

Iterate variables in SCSS?

html

css

sass

scss-mixins