Generated by SassMeister.com.

SassMeister-input-HTML.html

<div data-row>
  <div data-col="1"></div>
  <div data-col="1"></div>
  <div data-col="1"></div>
  <div data-col="1"></div>
  <div data-col="1"></div>
  <div data-col="1"></div>
  <div data-col="1"></div>
  <div data-col="1"></div>
</div>
<div data-row>
  <div data-col="2"></div>
  <div data-col="2"></div>
  <div data-col="2"></div>
  <div data-col="2"></div>
</div>
<div data-row>
  <div data-col="3"></div>
  <div data-col="3"></div>
  <div data-col="2"></div>
</div>
<div data-row>
  <div data-col="4">
    <div data-row>
      <div data-col="2"></div>
      <div data-col="2"></div>
      <div data-col="2"></div>
      <div data-col="2"></div>
    </div>
  </div>
  <div data-col="4">
    <div data-row>
      <div data-col="3"></div>
      <div data-col="5"></div>
    </div>
  </div>
</div>
<div data-row>
  <div data-col="5"></div>
  <div data-col="3"></div>
</div>
<div data-row>
  <div data-col="6"></div>
  <div data-col="2"></div>
</div>
<div data-row>
  <div data-col="7"></div>
  <div data-col="1"></div>
</div>
<div data-row>
  <div data-col="8"></div>
</div>
<div data-row>
  <div data-col="1"></div>
  <div data-col="7"></div>
</div>
<div data-row>
  <div data-col="2"></div>
  <div data-col="6"></div>
</div>
<div data-row>
  <div data-col="3"></div>
  <div data-col="5"></div>
</div>
<div data-row>
  <div data-col="2"></div>
  <div data-col="6"></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

//from: http://www.sitepoint.com/understanding-css-grid-systems/

//cw  = column width
//scw = single column width (6.86666667%;)
//cs  = column span(1~12)
//m   = margin (1.6%)
//mc  = maximum columns (12)

//scw = (100 - (m * (mc -1 ))) / mc
//cw  = (scw * cs) + (m * (cs - 1))

@mixin col-width($loop:false,$cs:12,$mc:12,$m: 1.6%){
  @if $loop {
    @for $i from 1 through $mc {
      [data-col="#{$i}"]{
          width: (((100 - ($m * ($mc - 1))) / $mc) * $i) + ($m * ($i - 1));
      }
    }
  } @else {
    width: (((100 - ($m * ($mc - 1))) / $mc) * $cs) + ($m * ($cs - 1));
  }
}

@include col-width(true,8,8,1.6%);

[data-row],
[data-col]{
  box-sizing: border-box;
}
[data-row]{
  margin-bottom: 10px;
  &:before,
  &:after {
    content:"";
    display: table;
  }
  &:after {
    clear:both;
  }
  &:last-child{
    margin-bottom:0;
  }
}
[data-col]{
  min-height: 50px;
  background-color: #eee;
  border-radius: 5px;
  float: left;
  position: relative;
  display: block;
  padding: 5px;
}

[data-col] + [data-col] {
  margin-left: 1.6%;
}

[data-col] [data-col]{
  background-color: #333;
}

SassMeister-output.css

[data-col="1"] {
  width: 11.1%;
}

[data-col="2"] {
  width: 23.8%;
}

[data-col="3"] {
  width: 36.5%;
}

[data-col="4"] {
  width: 49.2%;
}

[data-col="5"] {
  width: 61.9%;
}

[data-col="6"] {
  width: 74.6%;
}

[data-col="7"] {
  width: 87.3%;
}

[data-col="8"] {
  width: 100%;
}

[data-row],
[data-col] {
  box-sizing: border-box;
}

[data-row] {
  margin-bottom: 10px;
}
[data-row]:before, [data-row]:after {
  content: "";
  display: table;
}
[data-row]:after {
  clear: both;
}
[data-row]:last-child {
  margin-bottom: 0;
}

[data-col] {
  min-height: 50px;
  background-color: #eee;
  border-radius: 5px;
  float: left;
  position: relative;
  display: block;
  padding: 5px;
}

[data-col] + [data-col] {
  margin-left: 1.6%;
}

[data-col] [data-col] {
  background-color: #333;
}

SassMeister-rendered.html

<div data-row>
  <div data-col="1"></div>
  <div data-col="1"></div>
  <div data-col="1"></div>
  <div data-col="1"></div>
  <div data-col="1"></div>
  <div data-col="1"></div>
  <div data-col="1"></div>
  <div data-col="1"></div>
</div>
<div data-row>
  <div data-col="2"></div>
  <div data-col="2"></div>
  <div data-col="2"></div>
  <div data-col="2"></div>
</div>
<div data-row>
  <div data-col="3"></div>
  <div data-col="3"></div>
  <div data-col="2"></div>
</div>
<div data-row>
  <div data-col="4">
    <div data-row>
      <div data-col="2"></div>
      <div data-col="2"></div>
      <div data-col="2"></div>
      <div data-col="2"></div>
    </div>
  </div>
  <div data-col="4">
    <div data-row>
      <div data-col="3"></div>
      <div data-col="5"></div>
    </div>
  </div>
</div>
<div data-row>
  <div data-col="5"></div>
  <div data-col="3"></div>
</div>
<div data-row>
  <div data-col="6"></div>
  <div data-col="2"></div>
</div>
<div data-row>
  <div data-col="7"></div>
  <div data-col="1"></div>
</div>
<div data-row>
  <div data-col="8"></div>
</div>
<div data-row>
  <div data-col="1"></div>
  <div data-col="7"></div>
</div>
<div data-row>
  <div data-col="2"></div>
  <div data-col="6"></div>
</div>
<div data-row>
  <div data-col="3"></div>
  <div data-col="5"></div>
</div>
<div data-row>
  <div data-col="2"></div>
  <div data-col="6"></div>
</div>