[英]Iterate variables in SCSS?
I'm writing a function to fade items in, in sequence... 我正在写一个函数来按顺序淡入项目...
.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;
}
I have a lot of items and I don't want to have to manually keep adding a class for the next item. 我有很多项目,并且我不想手动继续为下一个项目添加一个类。
Can I iterate over the same rule using something like... 我可以使用类似的方法遍历相同的规则吗?
.sequenced-images li:nth-child(i++) {
animation-delay: i++s;
}
? ?
Yes, you can use for
loop and string interpolation : 是的,你可以使用for
循环和字符串插值 :
@for $i from 2 through 5 {
.sequenced-images li:nth-child(#{$i}) {
animation-delay: '#{$i - 1}s';
}
}
This will result in: 这将导致:
.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";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.