Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>Columns with gutter</p>
<div class="row " style="background: #f0f0f0; width: 1008px;">
  <div class="col-6 column">
    <div>6-col</div>
  </div>
  <div class="col-6 column">
    <div>6-col</div>
  </div>
  <br/><br/>
  <div class="col-4 column">
    <div>4-col</div>
  </div>
  <div class="col-4 column">
    <div>4-col</div>
  </div>
  <div class="col-4 column">
    <div>4-col</div>
  </div>
</div>

<p>Columns without gutter</p>
<div class="row no-gutter" style="background: #f0f0f0; width: 1008px;">
  <div class="col-6 column">
    <div>6-col</div>
  </div>
  <div class="col-6 column">
    <div>6-col</div>
  </div>
  <br/><br/>
  <div class="col-4 column">
    <div>4-col</div>
  </div>
  <div class="col-4 column">
    <div>4-col</div>
  </div>
  <div class="col-4 column">
    <div>4-col</div>
  </div>
</div>

SassMeister-input.scss

// ----
// libsass (v0.7.0)
// ----

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

// Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) {
  $width: $columns * ($fg-column + $fg-gutter * 2);
  $container-width: $container-columns * ($fg-column + $fg-gutter * 2);
  @return percentage($width / $container-width);
}

// Flexible gutter
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
  $container-width: $container-columns * ($fg-column + $fg-gutter * 2);
  @return percentage($gutter / $container-width);
}

// Grid settings
$fg-column: 64px;
$fg-gutter: 10px;
$fg-max-columns: 12;

.row {
  display: block;
  width: 100%;
  overflow: hidden;
  clear: both;
}

.column {
  float: left;
}

// *** Build grid ***
@for $i from 1 through $fg-max-columns {
  .col-#{$i} {
    width: flex-grid($i);
      padding: 0 flex-gutter();
  }
}

// reset padding for first column

// *** No gutter ***
.row.no-gutter {
 .column {
   padding: 0;
 }
}

// styling

.row {
  background: #f0f0f0;
  width: 1008px;
}

.column {
  div {
    background: #ddd; 
    height: 30px;
    border: 1px solid #aaa;
    line-height: 30px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #555;
  }
}

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.row {
  display: block;
  width: 100%;
  overflow: hidden;
  clear: both; }

.column {
  float: left; }

.col-1 {
  width: 8.33333%;
  padding: 0 0.99206%; }

.col-2 {
  width: 16.66667%;
  padding: 0 0.99206%; }

.col-3 {
  width: 25%;
  padding: 0 0.99206%; }

.col-4 {
  width: 33.33333%;
  padding: 0 0.99206%; }

.col-5 {
  width: 41.66667%;
  padding: 0 0.99206%; }

.col-6 {
  width: 50%;
  padding: 0 0.99206%; }

.col-7 {
  width: 58.33333%;
  padding: 0 0.99206%; }

.col-8 {
  width: 66.66667%;
  padding: 0 0.99206%; }

.col-9 {
  width: 75%;
  padding: 0 0.99206%; }

.col-10 {
  width: 83.33333%;
  padding: 0 0.99206%; }

.col-11 {
  width: 91.66667%;
  padding: 0 0.99206%; }

.col-12 {
  width: 100%;
  padding: 0 0.99206%; }

.row.no-gutter .column {
  padding: 0; }
  
.row {
  background: #f0f0f0;
  width: 1008px;
}

.column div {
  background: #ddd;
  height: 30px;
  border: 1px solid #aaa;
  line-height: 30px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #555; }

SassMeister-rendered.html

<p>Columns with gutter</p>
<div class="row">
  <div class="col-6 column">
    <div>6-col</div>
  </div>
  <div class="col-6 column">
    <div>6-col</div>
  </div>
  <br/><br/>
  <div class="col-4 column">
    <div>4-col</div>
  </div>
  <div class="col-4 column">
    <div>4-col</div>
  </div>
  <div class="col-4 column">
    <div>4-col</div>
  </div>
</div>

<p>Columns without gutter</p>
<div class="row no-gutter">
  <div class="col-6 column">
    <div>6-col</div>
  </div>
  <div class="col-6 column">
    <div>6-col</div>
  </div>
  <br/><br/>
  <div class="col-4 column">
    <div>4-col</div>
  </div>
  <div class="col-4 column">
    <div>4-col</div>
  </div>
  <div class="col-4 column">
    <div>4-col</div>
  </div>
</div>