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)
// ----


*{
  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 --*/

// Controle de grid-columns
    @for $i from 1 through $grid-columns {
        .col-#{$i} {
            //width: ($i / $grid-columns) * 100%;
            @include mobile {
              @include grid($i);
              background: green;
            }
            @include tablet {
              @include grid($i);
              background: gray;
            }
            @include desktop {
              @include grid($i);
              background: blue;
            }
            @include desktophd {
              @include grid($i);
              background: 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 --*/
@media (min-width: 480px) and (max-width: 767px) {
  .col-1 {
    width: 8.33333%;
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-1 {
    width: 8.33333%;
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-1 {
    width: 8.33333%;
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-1 {
    width: 8.33333%;
    background: red;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-2 {
    width: 16.66667%;
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-2 {
    width: 16.66667%;
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-2 {
    width: 16.66667%;
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-2 {
    width: 16.66667%;
    background: red;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-3 {
    width: 25%;
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-3 {
    width: 25%;
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-3 {
    width: 25%;
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-3 {
    width: 25%;
    background: red;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-4 {
    width: 33.33333%;
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-4 {
    width: 33.33333%;
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-4 {
    width: 33.33333%;
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-4 {
    width: 33.33333%;
    background: red;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-5 {
    width: 41.66667%;
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-5 {
    width: 41.66667%;
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-5 {
    width: 41.66667%;
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-5 {
    width: 41.66667%;
    background: red;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-6 {
    width: 50%;
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-6 {
    width: 50%;
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-6 {
    width: 50%;
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-6 {
    width: 50%;
    background: red;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-7 {
    width: 58.33333%;
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-7 {
    width: 58.33333%;
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-7 {
    width: 58.33333%;
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-7 {
    width: 58.33333%;
    background: red;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-8 {
    width: 66.66667%;
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-8 {
    width: 66.66667%;
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-8 {
    width: 66.66667%;
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-8 {
    width: 66.66667%;
    background: red;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-9 {
    width: 75%;
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-9 {
    width: 75%;
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-9 {
    width: 75%;
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-9 {
    width: 75%;
    background: red;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-10 {
    width: 83.33333%;
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-10 {
    width: 83.33333%;
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-10 {
    width: 83.33333%;
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-10 {
    width: 83.33333%;
    background: red;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-11 {
    width: 91.66667%;
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-11 {
    width: 91.66667%;
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-11 {
    width: 91.66667%;
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-11 {
    width: 91.66667%;
    background: red;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-12 {
    width: 100%;
    background: green;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-12 {
    width: 100%;
    background: gray;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .col-12 {
    width: 100%;
    background: blue;
  }
}

@media (min-width: 1200px) {
  .col-12 {
    width: 100%;
    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>