a precess production

precess-input-1399128743.scss

html, body{
  height:100%;
  background:#222;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
}


       top:$top * $blockSize;  
       left:5 * $blockSize; 
      } 
      @else if ($i < 26){
       top:1 * $blockSize;
       left:5 * $blockSize; 
      }
      @else if ($i < 27){
       top:1 * $blockSize; 
       left:6 * $blockSize; 
      }
      @else if ($i < 28){
       top:0 * $blockSize; 
       left:5 * $blockSize; 
      }
      @else if ($i < 33){
       top:0 * $blockSize;
       $left: 33 - $i;
       left:$left * $blockSize;  
      }
      
    }
  }

}

precess-output-1399128743.css

Line 13: Invalid CSS after "       top:": expected pseudoclass or pseudoelement, was "$top * $blockSi..."