Keyframe for "Step" animation

SassMeister-input.scss

// ----
// Sass (v3.2.10)
// Compass (v0.13.alpha.4)
// ----

@import "compass";
@import "breakpoint";


// keyframes mixin
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}

@for $i from 1 through 4 {
    @keyframes step-#{$i} {
        0% { top: 0px; }
        @for $j from 1 through $i {
            #{100%*$j/$i} {
                top: $j * 50px;
            }
        }
    }     
}

$breakpoints: (all,0,0) (desktop,769,0) (tablet,481,768) (mobile,0,480);
@mixin media($key){ // @content
    $bp:null;
    @for $i from 1 through length($breakpoints){
        $item:nth($breakpoints,$i);
        @if(nth($item,1)==$key){ $bp:$item; }
    }
    $min:nth($bp,2) * 1px; 
    $max:nth($bp,3) * 1px;
    $mq:'screen and (min-width:'+$min+') and (max-width:'+$max+')'; 
    @if($min and $max==0px){ $mq:'screen and (min-width:'+$min+')'; }
    @if($min==0px and $max){ $mq:'screen and (max-width:'+$max+')'; }
    @if($min==0px and $max==0px){ $mq:'all'; }
    @media #{unquote($mq)}{ @content; }
}

@mixin mediaExtend(){ // @content
    @for $i from 1 through length($breakpoints){
        $key:nth(nth($breakpoints,$i),1);
        @include media($key){ @content; };
    }
}

@include mediaExtend() {
    %blue {
        color: blue;    
    }    
}
@include media(all) {
    .test {
        @extend %blue;    
    }
}

SassMeister-output.css

@keyframes step-1 { 0% { top: 0px; }
  100% { top: 50px; } }

@keyframes step-2 { 0% { top: 0px; }
  50% { top: 50px; }
  100% { top: 100px; } }

@keyframes step-3 { 0% { top: 0px; }
  33.33333% { top: 50px; }
  66.66667% { top: 100px; }
  100% { top: 150px; } }

@keyframes step-4 { 0% { top: 0px; }
  25% { top: 50px; }
  50% { top: 100px; }
  75% { top: 150px; }
  100% { top: 200px; } }

@media all { .test { color: blue; } }