make grid with sass

SassMeister-input-HTML.html

<div class="container">
  <div class="row">
    <div class="col-6">6/12</div>
    <div class="col-6">6/12</div>
    <div class="col-4">4/12</div>
    <div class="col-4">4/12</div>
    <div class="col-4">4/12</div>
    <div class="col-3">3/12</div>
    <div class="col-3">3/12</div>
    <div class="col-3">3/12</div>
    <div class="col-3">3/12</div>
    <div class="col-8">8/12</div>
    <div class="col-4">4/12</div>
    <div class="col-12">12/12</div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.5.6)
// Compass (vundefined)
// ----

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

$gridNum :12;

%grid{
  background-color:#eee;
  font-weight:bold;
  padding:10px;
  border:1px solid #aaa;
  float:left;
  text-align:center;
}

@for $i from 1 through 12 {
  .col-#{$i} {
    width:(100% / ($gridNum / $i));
    @extend %grid;
  }
}

SassMeister-output.css

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

.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-color: #eee;
  font-weight: bold;
  padding: 10px;
  border: 1px solid #aaa;
  float: left;
  text-align: center;
}

.col-1 {
  width: 8.3333333333%;
}

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-8 {
  width: 66.6666666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333333333%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-12 {
  width: 100%;
}

SassMeister-rendered.html

<div class="container">
  <div class="row">
    <div class="col-6">6/12</div>
    <div class="col-6">6/12</div>
    <div class="col-4">4/12</div>
    <div class="col-4">4/12</div>
    <div class="col-4">4/12</div>
    <div class="col-3">3/12</div>
    <div class="col-3">3/12</div>
    <div class="col-3">3/12</div>
    <div class="col-3">3/12</div>
    <div class="col-8">8/12</div>
    <div class="col-4">4/12</div>
    <div class="col-12">12/12</div>
  </div>
</div>