How to generate multiple frames of using stylus?

Question

I try to migrate from SASS to Stylus, but I find it difficult to translate the following code from SASS to stylus:

$height : 30;
@-webkit-keyframes giene {
  @for $i from 1 through 50 {
    $percent: 0% + $i;
    $shrink: 1+$i/5;
    #{$percent} {
      -webkit-transform: matrix3d(
        1,0,0,0, 
        0,1,0, (1-$shrink) /$height, 
        0,0,1,0, 
        0,0,0,$shrink
      );
    }  
  }
  99% {
    -webkit-transform: matrix3d(
      1,   0,  0, 0, 
      0 ,  1,  0, -10/$height,
      0,   0,  1, 0, 
      0,   0,  0, 100
    );
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
.giene {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name:giene;
  -webkit-transform-origin: 75% 0;
  -webkit-perspective: 0;  
}
div{
  background:blue;
  border-radius:4px;
  width:120px;
  height: #{$height}px;
  color:white;
  font-family:Verdana;
}

(Viewable here: http://codepen.io/anon/pen/ApHkc)

The main problem I have is to define a for loop which creates %1 , ..., %50 keyframes, as even for a very simplified example of

@-webkit-keyframes giene
  for i in (1..50)
    p = 0% + i
    {p} : {
      color: red;
    }

I get parse errors claiming that "outdent" was expected instead of "for".

Answer 1

Beware of Codepen because there is a bug in stylus that's recently fixed about this for loop problem in keyframes. Maybe Codepen still has not updated stylus to the 0.44 version. Check this github issue https://github.com/LearnBoost/stylus/issues/1443

Anyway, stylus the code you are looking for is:

$height=30
@-webkit-keyframes giene
  for $i in (1)..(50)
    $percent = 0% + $i
    $shrink = 1 + $i / 5
    {$percent}
      -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, (1 - $shrink) / $height, 0, 0, 1, 0, 0, 0, 0, $shrink)
  99%
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -10 / $height, 0, 0, 1, 0, 0, 0, 0, 100)
    opacity: 1
  100%
    opacity: 0
.giene
  -webkit-animation-duration: 1s
  -webkit-animation-fill-mode: both
  -webkit-animation-name: giene
  -webkit-transform-origin: 75% 0
  -webkit-perspective: 0
div
  background: blue
  border-radius: 4px
  width: 120px
  height: $height px
  color: white
  font-family: Verdana