My first grid system

SassMeister-input.scss

// ----
// Sass (v4.0.0.alpha.1)
// Compass (vundefined)
// ----

$settings: (
    maxWidth: 800px,
    columns: 12,
    margin: 15px,
    breakpoints: (
        xs: "(max-width : 480px)",
        sm: "(max-width : 768px) and (min-width: 481px)",
        md: "(max-width : 1024px)  and (min-width: 769px)",
        lg: "(min-width : 1025px)"
    )   
);

@mixin renderGridStyles($settings){
  $breakpoints: map-get($settings, "breakpoints");
  @each $key, $breakpoint in $breakpoints {
    @include media($breakpoint) {
      .container {
        padding-right: map-get($settings, "margin");
        padding-left: map-get($settings, "margin");
        margin-right: auto;
        margin-left: auto;
        max-width: map-get($settings,"maxWidth");
      } 
    
      .row {
        margin-right: map-get($settings, "margin") * -1;
        margin-left: map-get($settings, "margin") * -1;
      }
    }
    $breakpoints: map-get($settings, "breakpoints");
      @each $key, $breakpoint in $breakpoints {
        @include media($breakpoint) {
          @include renderGrid($key, $settings);
        }
    }
  }
}

@mixin renderGrid($key, $settings) {
  $i: 1;
  @while $i <= map-get($settings, "columns") {
    .col-#{$key}-#{$i} {
      float: left;
      width: 100% * $i / map-get($settings,"columns");
    }
    $i: $i+1;
  }
}

@mixin media($queryString){
    @media #{$queryString} {
      @content;
    }
}

@include renderGridStyles($settings);

SassMeister-output.css

@media (max-width: 480px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 800px;
  }

  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
}
@media (max-width: 480px) {
  .col-xs-1 {
    float: left;
    width: 8.33333%;
  }

  .col-xs-2 {
    float: left;
    width: 16.66667%;
  }

  .col-xs-3 {
    float: left;
    width: 25%;
  }

  .col-xs-4 {
    float: left;
    width: 33.33333%;
  }

  .col-xs-5 {
    float: left;
    width: 41.66667%;
  }

  .col-xs-6 {
    float: left;
    width: 50%;
  }

  .col-xs-7 {
    float: left;
    width: 58.33333%;
  }

  .col-xs-8 {
    float: left;
    width: 66.66667%;
  }

  .col-xs-9 {
    float: left;
    width: 75%;
  }

  .col-xs-10 {
    float: left;
    width: 83.33333%;
  }

  .col-xs-11 {
    float: left;
    width: 91.66667%;
  }

  .col-xs-12 {
    float: left;
    width: 100%;
  }
}
@media (max-width: 768px) and (min-width: 481px) {
  .col-sm-1 {
    float: left;
    width: 8.33333%;
  }

  .col-sm-2 {
    float: left;
    width: 16.66667%;
  }

  .col-sm-3 {
    float: left;
    width: 25%;
  }

  .col-sm-4 {
    float: left;
    width: 33.33333%;
  }

  .col-sm-5 {
    float: left;
    width: 41.66667%;
  }

  .col-sm-6 {
    float: left;
    width: 50%;
  }

  .col-sm-7 {
    float: left;
    width: 58.33333%;
  }

  .col-sm-8 {
    float: left;
    width: 66.66667%;
  }

  .col-sm-9 {
    float: left;
    width: 75%;
  }

  .col-sm-10 {
    float: left;
    width: 83.33333%;
  }

  .col-sm-11 {
    float: left;
    width: 91.66667%;
  }

  .col-sm-12 {
    float: left;
    width: 100%;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .col-md-1 {
    float: left;
    width: 8.33333%;
  }

  .col-md-2 {
    float: left;
    width: 16.66667%;
  }

  .col-md-3 {
    float: left;
    width: 25%;
  }

  .col-md-4 {
    float: left;
    width: 33.33333%;
  }

  .col-md-5 {
    float: left;
    width: 41.66667%;
  }

  .col-md-6 {
    float: left;
    width: 50%;
  }

  .col-md-7 {
    float: left;
    width: 58.33333%;
  }

  .col-md-8 {
    float: left;
    width: 66.66667%;
  }

  .col-md-9 {
    float: left;
    width: 75%;
  }

  .col-md-10 {
    float: left;
    width: 83.33333%;
  }

  .col-md-11 {
    float: left;
    width: 91.66667%;
  }

  .col-md-12 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1025px) {
  .col-lg-1 {
    float: left;
    width: 8.33333%;
  }

  .col-lg-2 {
    float: left;
    width: 16.66667%;
  }

  .col-lg-3 {
    float: left;
    width: 25%;
  }

  .col-lg-4 {
    float: left;
    width: 33.33333%;
  }

  .col-lg-5 {
    float: left;
    width: 41.66667%;
  }

  .col-lg-6 {
    float: left;
    width: 50%;
  }

  .col-lg-7 {
    float: left;
    width: 58.33333%;
  }

  .col-lg-8 {
    float: left;
    width: 66.66667%;
  }

  .col-lg-9 {
    float: left;
    width: 75%;
  }

  .col-lg-10 {
    float: left;
    width: 83.33333%;
  }

  .col-lg-11 {
    float: left;
    width: 91.66667%;
  }

  .col-lg-12 {
    float: left;
    width: 100%;
  }
}
@media (max-width: 768px) and (min-width: 481px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 800px;
  }

  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
}
@media (max-width: 480px) {
  .col-xs-1 {
    float: left;
    width: 8.33333%;
  }

  .col-xs-2 {
    float: left;
    width: 16.66667%;
  }

  .col-xs-3 {
    float: left;
    width: 25%;
  }

  .col-xs-4 {
    float: left;
    width: 33.33333%;
  }

  .col-xs-5 {
    float: left;
    width: 41.66667%;
  }

  .col-xs-6 {
    float: left;
    width: 50%;
  }

  .col-xs-7 {
    float: left;
    width: 58.33333%;
  }

  .col-xs-8 {
    float: left;
    width: 66.66667%;
  }

  .col-xs-9 {
    float: left;
    width: 75%;
  }

  .col-xs-10 {
    float: left;
    width: 83.33333%;
  }

  .col-xs-11 {
    float: left;
    width: 91.66667%;
  }

  .col-xs-12 {
    float: left;
    width: 100%;
  }
}
@media (max-width: 768px) and (min-width: 481px) {
  .col-sm-1 {
    float: left;
    width: 8.33333%;
  }

  .col-sm-2 {
    float: left;
    width: 16.66667%;
  }

  .col-sm-3 {
    float: left;
    width: 25%;
  }

  .col-sm-4 {
    float: left;
    width: 33.33333%;
  }

  .col-sm-5 {
    float: left;
    width: 41.66667%;
  }

  .col-sm-6 {
    float: left;
    width: 50%;
  }

  .col-sm-7 {
    float: left;
    width: 58.33333%;
  }

  .col-sm-8 {
    float: left;
    width: 66.66667%;
  }

  .col-sm-9 {
    float: left;
    width: 75%;
  }

  .col-sm-10 {
    float: left;
    width: 83.33333%;
  }

  .col-sm-11 {
    float: left;
    width: 91.66667%;
  }

  .col-sm-12 {
    float: left;
    width: 100%;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .col-md-1 {
    float: left;
    width: 8.33333%;
  }

  .col-md-2 {
    float: left;
    width: 16.66667%;
  }

  .col-md-3 {
    float: left;
    width: 25%;
  }

  .col-md-4 {
    float: left;
    width: 33.33333%;
  }

  .col-md-5 {
    float: left;
    width: 41.66667%;
  }

  .col-md-6 {
    float: left;
    width: 50%;
  }

  .col-md-7 {
    float: left;
    width: 58.33333%;
  }

  .col-md-8 {
    float: left;
    width: 66.66667%;
  }

  .col-md-9 {
    float: left;
    width: 75%;
  }

  .col-md-10 {
    float: left;
    width: 83.33333%;
  }

  .col-md-11 {
    float: left;
    width: 91.66667%;
  }

  .col-md-12 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1025px) {
  .col-lg-1 {
    float: left;
    width: 8.33333%;
  }

  .col-lg-2 {
    float: left;
    width: 16.66667%;
  }

  .col-lg-3 {
    float: left;
    width: 25%;
  }

  .col-lg-4 {
    float: left;
    width: 33.33333%;
  }

  .col-lg-5 {
    float: left;
    width: 41.66667%;
  }

  .col-lg-6 {
    float: left;
    width: 50%;
  }

  .col-lg-7 {
    float: left;
    width: 58.33333%;
  }

  .col-lg-8 {
    float: left;
    width: 66.66667%;
  }

  .col-lg-9 {
    float: left;
    width: 75%;
  }

  .col-lg-10 {
    float: left;
    width: 83.33333%;
  }

  .col-lg-11 {
    float: left;
    width: 91.66667%;
  }

  .col-lg-12 {
    float: left;
    width: 100%;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 800px;
  }

  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
}
@media (max-width: 480px) {
  .col-xs-1 {
    float: left;
    width: 8.33333%;
  }

  .col-xs-2 {
    float: left;
    width: 16.66667%;
  }

  .col-xs-3 {
    float: left;
    width: 25%;
  }

  .col-xs-4 {
    float: left;
    width: 33.33333%;
  }

  .col-xs-5 {
    float: left;
    width: 41.66667%;
  }

  .col-xs-6 {
    float: left;
    width: 50%;
  }

  .col-xs-7 {
    float: left;
    width: 58.33333%;
  }

  .col-xs-8 {
    float: left;
    width: 66.66667%;
  }

  .col-xs-9 {
    float: left;
    width: 75%;
  }

  .col-xs-10 {
    float: left;
    width: 83.33333%;
  }

  .col-xs-11 {
    float: left;
    width: 91.66667%;
  }

  .col-xs-12 {
    float: left;
    width: 100%;
  }
}
@media (max-width: 768px) and (min-width: 481px) {
  .col-sm-1 {
    float: left;
    width: 8.33333%;
  }

  .col-sm-2 {
    float: left;
    width: 16.66667%;
  }

  .col-sm-3 {
    float: left;
    width: 25%;
  }

  .col-sm-4 {
    float: left;
    width: 33.33333%;
  }

  .col-sm-5 {
    float: left;
    width: 41.66667%;
  }

  .col-sm-6 {
    float: left;
    width: 50%;
  }

  .col-sm-7 {
    float: left;
    width: 58.33333%;
  }

  .col-sm-8 {
    float: left;
    width: 66.66667%;
  }

  .col-sm-9 {
    float: left;
    width: 75%;
  }

  .col-sm-10 {
    float: left;
    width: 83.33333%;
  }

  .col-sm-11 {
    float: left;
    width: 91.66667%;
  }

  .col-sm-12 {
    float: left;
    width: 100%;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .col-md-1 {
    float: left;
    width: 8.33333%;
  }

  .col-md-2 {
    float: left;
    width: 16.66667%;
  }

  .col-md-3 {
    float: left;
    width: 25%;
  }

  .col-md-4 {
    float: left;
    width: 33.33333%;
  }

  .col-md-5 {
    float: left;
    width: 41.66667%;
  }

  .col-md-6 {
    float: left;
    width: 50%;
  }

  .col-md-7 {
    float: left;
    width: 58.33333%;
  }

  .col-md-8 {
    float: left;
    width: 66.66667%;
  }

  .col-md-9 {
    float: left;
    width: 75%;
  }

  .col-md-10 {
    float: left;
    width: 83.33333%;
  }

  .col-md-11 {
    float: left;
    width: 91.66667%;
  }

  .col-md-12 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1025px) {
  .col-lg-1 {
    float: left;
    width: 8.33333%;
  }

  .col-lg-2 {
    float: left;
    width: 16.66667%;
  }

  .col-lg-3 {
    float: left;
    width: 25%;
  }

  .col-lg-4 {
    float: left;
    width: 33.33333%;
  }

  .col-lg-5 {
    float: left;
    width: 41.66667%;
  }

  .col-lg-6 {
    float: left;
    width: 50%;
  }

  .col-lg-7 {
    float: left;
    width: 58.33333%;
  }

  .col-lg-8 {
    float: left;
    width: 66.66667%;
  }

  .col-lg-9 {
    float: left;
    width: 75%;
  }

  .col-lg-10 {
    float: left;
    width: 83.33333%;
  }

  .col-lg-11 {
    float: left;
    width: 91.66667%;
  }

  .col-lg-12 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1025px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 800px;
  }

  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
}
@media (max-width: 480px) {
  .col-xs-1 {
    float: left;
    width: 8.33333%;
  }

  .col-xs-2 {
    float: left;
    width: 16.66667%;
  }

  .col-xs-3 {
    float: left;
    width: 25%;
  }

  .col-xs-4 {
    float: left;
    width: 33.33333%;
  }

  .col-xs-5 {
    float: left;
    width: 41.66667%;
  }

  .col-xs-6 {
    float: left;
    width: 50%;
  }

  .col-xs-7 {
    float: left;
    width: 58.33333%;
  }

  .col-xs-8 {
    float: left;
    width: 66.66667%;
  }

  .col-xs-9 {
    float: left;
    width: 75%;
  }

  .col-xs-10 {
    float: left;
    width: 83.33333%;
  }

  .col-xs-11 {
    float: left;
    width: 91.66667%;
  }

  .col-xs-12 {
    float: left;
    width: 100%;
  }
}
@media (max-width: 768px) and (min-width: 481px) {
  .col-sm-1 {
    float: left;
    width: 8.33333%;
  }

  .col-sm-2 {
    float: left;
    width: 16.66667%;
  }

  .col-sm-3 {
    float: left;
    width: 25%;
  }

  .col-sm-4 {
    float: left;
    width: 33.33333%;
  }

  .col-sm-5 {
    float: left;
    width: 41.66667%;
  }

  .col-sm-6 {
    float: left;
    width: 50%;
  }

  .col-sm-7 {
    float: left;
    width: 58.33333%;
  }

  .col-sm-8 {
    float: left;
    width: 66.66667%;
  }

  .col-sm-9 {
    float: left;
    width: 75%;
  }

  .col-sm-10 {
    float: left;
    width: 83.33333%;
  }

  .col-sm-11 {
    float: left;
    width: 91.66667%;
  }

  .col-sm-12 {
    float: left;
    width: 100%;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .col-md-1 {
    float: left;
    width: 8.33333%;
  }

  .col-md-2 {
    float: left;
    width: 16.66667%;
  }

  .col-md-3 {
    float: left;
    width: 25%;
  }

  .col-md-4 {
    float: left;
    width: 33.33333%;
  }

  .col-md-5 {
    float: left;
    width: 41.66667%;
  }

  .col-md-6 {
    float: left;
    width: 50%;
  }

  .col-md-7 {
    float: left;
    width: 58.33333%;
  }

  .col-md-8 {
    float: left;
    width: 66.66667%;
  }

  .col-md-9 {
    float: left;
    width: 75%;
  }

  .col-md-10 {
    float: left;
    width: 83.33333%;
  }

  .col-md-11 {
    float: left;
    width: 91.66667%;
  }

  .col-md-12 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1025px) {
  .col-lg-1 {
    float: left;
    width: 8.33333%;
  }

  .col-lg-2 {
    float: left;
    width: 16.66667%;
  }

  .col-lg-3 {
    float: left;
    width: 25%;
  }

  .col-lg-4 {
    float: left;
    width: 33.33333%;
  }

  .col-lg-5 {
    float: left;
    width: 41.66667%;
  }

  .col-lg-6 {
    float: left;
    width: 50%;
  }

  .col-lg-7 {
    float: left;
    width: 58.33333%;
  }

  .col-lg-8 {
    float: left;
    width: 66.66667%;
  }

  .col-lg-9 {
    float: left;
    width: 75%;
  }

  .col-lg-10 {
    float: left;
    width: 83.33333%;
  }

  .col-lg-11 {
    float: left;
    width: 91.66667%;
  }

  .col-lg-12 {
    float: left;
    width: 100%;
  }
}