Sass 转换-延迟循环?

Question

我正在通过 AJAX 将项目推送到数组上，并将它们每个渲染到 DOM 中，并带有淡入淡出的过渡。以下是我编写的SASS，用于为每个后续项目添加很好的延迟：

@for $i from 1 through 100 {
.album:nth-of-type(#{$i}) {
transition-delay: $i * 0.15s;
}
}

这按预期工作，但问题是，我一次对项目进行分页 6 个。这意味着在第一次获取 6 时，所有转换都按预期进行，但是当我获取下一个 6 而不是立即渲染时，它们会受到transition-delay增量的影响。

正在寻找的是SASS逻辑，基本上将重置每个第 6 个实例/子实例/子实例的增量transition-delay。我该如何实现此目的？

Answer 1

有效地实现相同的目标，只需生成 6 个规则。CSS逻辑，而不是SASS！

@for $i from 1 through 6 {
.album:nth-of-type(6n + #{$i}) {
transition-delay: $i * 0.15s;
}
}