SASS or LESS Keyframes percentage loop
css-animations, less, loops, sass
Solution
It will work if you finagle it like this:
@keyframes test {
@for $i from 0 through 100 {
#{$i * 1%} {
// do special stuff
}
}
}
Problem
I'm testing something special and I'm trying to loop inside keyframes to dynamically write percentages into it. I've tested something like that with SASS but it doesn't work. ``` @keyframes test{ @for $i from 0 through 100 { #{$i}% { //do special stuff } $i: $i + 1; } ``` I want it to output : ``` @keyframes test{ 0%{ ... } 1%{ ... } 2%{ ... } 3%{ ... } ... } ``` But I got ``` Error on line number: 23. Invalid CSS after " #{$i}%": expected placeholder name, was " {" ``` I've tested this in LESS and it doesn't work either. ``` @a: 0%; @keyframes test{ .func (@a, @b, @c); } .func (@a, @b, @c) when (@a < 100%){ (@a){ //do special stuff } .func (@a+1, @b, @c); } ``` Can someone help me ?