Generated by SassMeister.com.

SassMeister-input-HTML.haml

- (1..12).each do |i|
  %div{:class => "item-"#{i}}

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;
}

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%;
}

SassMeister-rendered.html

<!-- /.col-=i -->
<div class='item'></div>
<!-- /.col-=i -->
<div class='item'></div>
<!-- /.col-=i -->
<div class='item'></div>
<!-- /.col-=i -->
<div class='item'></div>
<!-- /.col-=i -->
<div class='item'></div>
<!-- /.col-=i -->
<div class='item'></div>
<!-- /.col-=i -->
<div class='item'></div>
<!-- /.col-=i -->
<div class='item'></div>
<!-- /.col-=i -->
<div class='item'></div>
<!-- /.col-=i -->
<div class='item'></div>
<!-- /.col-=i -->
<div class='item'></div>
<!-- /.col-=i -->
<div class='item'></div>