SASS or LESS Keyframes percentage loop

Question

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 ?

For `@for` loops in Sass, you don't need to manually add to `$i` in the loop. Remove `$i: $i + 1;` and it will still work. — bookcasey, Apr 14 '13 at 00:03

score 23 · Answer 1 · answered Apr 14 '13 at 00:00

23

It will work if you finagle it like this:

@keyframes test {
  @for $i from 0 through 100 {
    #{$i * 1%} {
      // do special stuff
    } 
  }
}

answered Apr 14 '13 at 00:00

bookcasey

39,223
13
77
94

score 1 · Answer 2 · answered Feb 09 '14 at 12:40

1

LESS version

requires the .for mixin

https://github.com/pixelass/more-or-less/blob/master/less/fn/_for.less

NOTICE

This is a NON inline-js version for maximum compatibility

INPUT

@keyframes crazy {
    .for(0,100);.-each(@i){
        @selector: e('@{i}%');

        @{selector} {
            /* do crazy stuff */
        }
    }
}

OUTPUT

@keyframes crazy {
  0% {
    /* do crazy stuff */
  }
  1% {
    /* do crazy stuff */
  }
  2% {
    /* do crazy stuff */
  }
  3% {
    /* do crazy stuff */
  }
  4% {
    /* do crazy stuff */
  }
    ...etc
}

answered Feb 09 '14 at 12:40

Is still required this *.for* mixin on LESS 2.7.1? – another Jul 15 '16 at 19:10
Not sure what you mean? Less does not support loops: http://lesscss.org/functions/#functions-overview : I case you're interested take a look at this https://github.com/pixelass/homeless it is better and faster than "more-or-less" – Jul 17 '16 at 07:36
I will close soon my [question](https://stackoverflow.com/questions/38404204/how-to-iterate-keyframe-percentages-less-css) then. But I have seen people [looping](https://www.youtube.com/watch?v=ex0ndyb_E5w") with native LESS. – another Jul 17 '16 at 08:14
Eventually I got a working answer for this (by @Harry) without the need of install an external Less library. [LINK](https://stackoverflow.com/questions/38404204/how-to-iterate-keyframe-percentages-less-css) – another Jul 18 '16 at 08:42

score 1 · Answer 3 · answered Jul 19 '19 at 18:51

Sass apparently needs a value defined as percentage for it to render correctly. This example generates keyframes to animate a background, but you can change both the list of values and the property to animate.

SASS


//Given a list of colors
$COLORS: $COLOR-MAIN #f39d75 #c1cecd #f3f57e

// Define a mixin
=animate-color-keyframes($list: $COLORS, $property: background)
    //declare the first keyframe statically
    0%
        #{$property}: nth($list, -1)
    @for $i from 1 through length($list)
        // calculate the keyframe percentage
        $percentage: $i / length($list)
        $keyframe: percentage($percentage)
        // render keyframes
        #{$keyframe}
            #{$property}: nth($list, $i)

// .....
@keyframes change-bg-color
    +animate-color-keyframes

CSS OUTPUT


@keyframes change-bg-color {
  0% {
    background: #f3f57e; }
  25% {
    background: #abf0b3; }
  50% {
    background: #f39d75; }
  75% {
    background: #c1cecd; }
  100% {
    background: #f3f57e; } 
}