SCSS flexible/fluid column mixin

SCSS flexible/fluid column mixin

HTML

<div class="cols num_2">
  <div class="col"></div>
  <div class="col"></div>
</div>

<div class="cols num_3">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

<div class="cols num_4">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

<div class="cols num_5">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

SCSS

@mixin cols($cols: 2, $space: 5){
    $filler: ($space - ($space / $cols));
    
    width: (100% / $cols) - $filler;
    margin-right: $space%;
    min-height: 1px;
    
    &:last-child {
        margin-right: 0;
    }
}

.cols {
    background: #ccc;
    height: 45px;
    margin-bottom: 10px;
}

.col {
    background: #666;
    height: 30px;
    float: left;
}

$i: 6;

@while $i > 1 {    
    .num_#{$i} .col {
        @include cols($i);
    }
    
    @media only screen and (max-width: 400px){
        .num_#{$i} .col {
            @include cols(1);
        }
    }
    
    $i: $i - 1;
}