是否可以在SASS中重新分配或增加/减少变量?

Question

我已经设置了一个样式规则使用SASS动画在我的应用程序中的一些元素。

它最初是这样设置的(其中$dropdown-length为1.5s):

&:nth-child(2) {
animation-delay: ($dropdown-length + 0.2s);
}
&:nth-child(3) {
animation-delay: ($dropdown-length + 0.4s);
}
&:nth-child(4) {
animation-delay: ($dropdown-length + 0.6s);
}
&:nth-child(5) {
animation-delay: ($dropdown-length + 0.8s);
}
&:nth-child(6) {
animation-delay: ($dropdown-length + 1s);
}
&:nth-child(7) {
animation-delay: ($dropdown-length + 1.2s);
}
&:nth-child(8) {
animation-delay: ($dropdown-length + 1.4s);
}
&:nth-child(9) {
animation-delay: ($dropdown-length + 1.6s);
}

正如你所看到的，这是非常重复的，不是很DRY。所以我尝试利用SASS的好处。我想到了:

@for $num from 2 through 10 {
$i: 0;
&:nth-child(#{$num}) {
$i: $i + 0.2s;
animation-delay: ($dropdown-length + $i);
}
}

然而，我正在努力寻找是否有可能在for循环的每次迭代上增加另一个变量(在本例中为$ I)。目前，它似乎只是将$i设置为0.2s，并在每次迭代中保持恒定的0.2s。我希望$ I在每次连续迭代中增加0.2s。什么好主意吗?谢谢。

Answer 1

正如@Justinas所说，你的循环每次迭代都会重置自己。您应该将$i从循环中移除，如下所示:

$dropdown-length: 1.5s;
.foo {
$i: 0;
@for $num from 2 through 10 {
&:nth-child(#{$num}) {
$i: $i + 0.2s;
animation-delay: ($dropdown-length + $i);
}
}
}

输出:

.foo:nth-child(2) {
animation-delay: 1.7s;
}
.foo:nth-child(3) {
animation-delay: 1.9s;
}
.foo:nth-child(4) {
animation-delay: 2.1s;
}
.foo:nth-child(5) {
animation-delay: 2.3s;
}
.foo:nth-child(6) {
animation-delay: 2.5s;
}
.foo:nth-child(7) {
animation-delay: 2.7s;
}
.foo:nth-child(8) {
animation-delay: 2.9s;
}
.foo:nth-child(9) {
animation-delay: 3.1s;
}
.foo:nth-child(10) {
animation-delay: 3.3s;
}