Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="col-1">1</div>
<div class="col-2">2</div><div class="col-12">12</div>
<div class="col-3">3</div><div class="col-11">11</div>
<div class="col-4">4</div><div class="col-10">10</div>
<div class="col-5">5</div><div class="col-9">9</div>
<div class="col-6">6</div><div class="col-8">8</div>
<div class="col-7">7</div><div class="col-7">7</div>
<div class="col-8">8</div><div class="col-6">6</div>
<div class="col-9">9</div><div class="col-5">5</div>
<div class="col-10">10</div><div class="col-4">4</div>
<div class="col-11">11</div><div class="col-3">3</div>
<div class="col-12">12</div><div class="col-2">2</div>

SassMeister-input.scss

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

// 12 column grid
$cols: 12;
// Column widths as percentages
$col-width: percentage(1 / $cols);
@for $i from 1 through $cols {
    .col-#{$cols} {
      width: $col-width * $i;
    }
    // Iterate the counter
    $cols: $cols - 1;
}

[class^="col"] {
  background: #aaa;
  float: left;
  padding: 10px 15px;
  border: solid 3px white;
}

// Reset
* {
  box-sizing: border-box;
}

body {
  margin: 20px;
  font-family: sans-serif;
  font-weight: bold;
}

SassMeister-output.css

.col-12 {
  width: 8.33333%;
}

.col-11 {
  width: 16.66667%;
}

.col-10 {
  width: 25.0%;
}

.col-9 {
  width: 33.33333%;
}

.col-8 {
  width: 41.66667%;
}

.col-7 {
  width: 50.0%;
}

.col-6 {
  width: 58.33333%;
}

.col-5 {
  width: 66.66667%;
}

.col-4 {
  width: 75.0%;
}

.col-3 {
  width: 83.33333%;
}

.col-2 {
  width: 91.66667%;
}

.col-1 {
  width: 100.0%;
}

[class^="col"] {
  background: #aaa;
  float: left;
  padding: 10px 15px;
  border: solid 3px white;
}

* {
  box-sizing: border-box;
}

body {
  margin: 20px;
  font-family: sans-serif;
  font-weight: bold;
}

SassMeister-rendered.html

<div class="col-1">1</div>
<div class="col-2">2</div><div class="col-12">12</div>
<div class="col-3">3</div><div class="col-11">11</div>
<div class="col-4">4</div><div class="col-10">10</div>
<div class="col-5">5</div><div class="col-9">9</div>
<div class="col-6">6</div><div class="col-8">8</div>
<div class="col-7">7</div><div class="col-7">7</div>
<div class="col-8">8</div><div class="col-6">6</div>
<div class="col-9">9</div><div class="col-5">5</div>
<div class="col-10">10</div><div class="col-4">4</div>
<div class="col-11">11</div><div class="col-3">3</div>
<div class="col-12">12</div><div class="col-2">2</div>