作者:没得名儿呀没名字 | 来源:互联网 | 2022-12-07 19:29
我正在编写一个函数来依次淡化项目...
.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;
}
我有很多项目,我不想手动为下一个项目添加一个类.
我可以使用类似的东西迭代相同的规则吗?
.sequenced-images li:nth-child(i++) {
animation-delay: i++s;
}
?
1> juzraai..:
是的,你可以使用for
循环和字符串插值:
@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";
}