Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container outline">
    <div class="row">
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
    </div>
    <div class="row">
        <div class="col-2"><p>col-2</p></div>
        <div class="col-2"><p>col-2</p></div>
        <div class="col-2"><p>col-2</p></div>
    </div>
    <div class="row">
        <div class="col-3"><p>col-3</p></div>
        <div class="col-3"><p>col-3</p></div>
    </div>
    <div class="col-12">
        <div class="col-6"><p>col-4</p></div>
        <div class="col-6"><p>col-2</p></div>
    </div>
    <div class="row">
        <div class="col-5"><p>col-5</p></div>
        <div class="col-1"><p>col-1</p></div>
    </div>
    <div class="row">
        <div class="col-12"><p>col-6</p></div>
    </div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// ----
// libsass (v3.2.5)
// ----


*{
  box-sizing:border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
//Variáveis do grid
//Colunas
$grid-columns: 12;
$grid-max-width: 65em;
//Telas
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;

//Estilo de teste
$color: #454545;
$grid-gutter-width:10px;
$bgcolor: #fff200;
$outline: #ffcc00;

//
@mixin mobile {
  @media (min-width: #{$screen-xs}) and (max-width: #{$screen-sm - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$screen-sm}) and (max-width: #{$screen-md - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$screen-md}) and (max-width: #{$screen-lg - 1px}) {
    @content;
  }
}

@mixin desktophd {
  @media (min-width: #{$screen-lg}) {
    @content;
  }
}


@mixin grid($n, $grid-columns:$grid-columns){
  width: $n / $grid-columns * 100%;
}

.container{
        width: 100%;
    }
    /*-- our cleafix hack -- */
    .row:before,
    .row:after {
        content:"";
        display: table ;
        clear:both;
    }

    [class*='col-'] {
        float: left;
        min-height: 1px;
        width: 16.66%;
        /*-- our gutter -- */
        padding: $grid-gutter-width;
        background-color: $bgcolor;
    }
    [class*='col-'] > p {
     background-color: #99cc00;
     padding: 0;
     margin: 0;
     text-align: center;
     color: $color;
    }

    .outline, .outline *{
        outline: 1px solid $outline;
    }
    /*-- some extra column content styling --*/
@mixin forColor($color){
    $a : "";
    @for $i from 1 through $grid-columns {
      @if($i == 1){
        $a : $a + ".col-#{$i}";  
      }@else{
        $a : $a + ", .col-#{$i}";
      }
      
      
    }
    #{$a}{ 
      background: $color;
    }
}
@for $i from 1 through $grid-columns {
  .col-#{$i} { 
    @include grid($i);
  }
}
// Controle de grid-columns
  
  //width: ($i / $grid-columns) * 100%;
  @include mobile {
    @include forColor(green);
  }
  @include tablet {
    @include forColor(gray);
  }
  @include desktop {
    @include forColor(blue);
  }
  @include desktophd {
    @include forColor(red);
  }

SassMeister-output.css

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
}

/*-- our cleafix hack -- */
.row:before,
.row:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
  min-height: 1px;
  width: 16.66%;
  /*-- our gutter -- */
  padding: 10px;
  background-color: #fff200;
}

[class*='col-'] > p {
  background-color: #99cc00;
  padding: 0;
  margin: 0;
  text-align: center;
  color: #454545;
}

.outline, .outline * {
  outline: 1px solid #ffcc00;
}

/*-- some extra column content styling --*/
.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33333%;
}

.col-5 {
  width: 41.66667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33333%;
}

.col-8 {
  width: 66.66667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33333%;
}

.col-11 {
  width: 91.66667%;
}

.col-12 {
  width: 100%;
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    background: red;
  }
}

SassMeister-rendered.html

<div class="container outline">
    <div class="row">
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
    </div>
    <div class="row">
        <div class="col-2"><p>col-2</p></div>
        <div class="col-2"><p>col-2</p></div>
        <div class="col-2"><p>col-2</p></div>
    </div>
    <div class="row">
        <div class="col-3"><p>col-3</p></div>
        <div class="col-3"><p>col-3</p></div>
    </div>
    <div class="col-12">
        <div class="col-6"><p>col-4</p></div>
        <div class="col-6"><p>col-2</p></div>
    </div>
    <div class="row">
        <div class="col-5"><p>col-5</p></div>
        <div class="col-1"><p>col-1</p></div>
    </div>
    <div class="row">
        <div class="col-12"><p>col-6</p></div>
    </div>
</div>