CSS

sass loop columns

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

------CSS---------
$grid-columns: 12;

@for $i from 1 through $grid-columns {
  .grid-#{$i} {
    width: percentage($i / $grid-columns);
  }
}


// styles
[class^='grid-'] {
  border: 1px solid;
  box-sizing: border-box;
  float: left;
  padding: 1em 0;
  text-align: center;
}