Simple sass grid mixin

simple-sass-grid.scss

/*doc
---
title: Grid System
name: grid
category: base
---

A very basic grid system that supports **2-, 3-, 4- and 5-column** layouts.
Inspired by [oocss](http://oocss.org/).

```html_example
<div class="grid__line">
    <div class="grid__unit--1of2">
        2 Col
    </div>
    <div class="grid__unit--1of2">
        2 Col
    </div>
</div>

<div class="grid__line">
    <div class="grid__unit--1of3">
        3 Col
    </div>
    <div class="grid__unit--1of3">
        3 Col
    </div>
    <div class="grid__unit--1of3">
        3 Col
    </div>
</div>

<div class="grid__line">
    <div class="grid__unit--1of4">
        4 Col
    </div>
    <div class="grid__unit--1of4">
        4 Col
    </div>
    <div class="grid__unit--1of4">
        4 Col
    </div>
    <div class="grid__unit--1of4">
        4 Col
    </div>
</div>

<div class="grid__line">
    <div class="grid__unit--1of5">
        5 Col
    </div>
    <div class="grid__unit--1of5">
        5 Col
    </div>
    <div class="grid__unit--1of5">
        5 Col
    </div>
    <div class="grid__unit--1of5">
        5 Col
    </div>
    <div class="grid__unit--1of5">
        5 Col
    </div>
</div>
```

Besides "1 of X" classes there are also "N of X" classes available:

```html_example
<div class="grid__line">
    <div class="grid__unit--2of3">
        2 of 3 = 66.6666%
    </div>
    <div class="grid__unit--1of3">
        1 of 3 = 33.3333%
    </div>
</div>

<div class="grid__line">
    <div class="grid__unit--3of5">
        3 of 5 = 60%
    </div>
    <div class="grid__unit--2of5">
        2 of 5 = 40%
    </div>
</div>
```

The grid also is nestable:

```html_example
<div class="grid__line">
    <div class="grid__unit--1of5">
        1of5
    </div>
    <div class="grid__unit--4of5">
        <div class="grid__line">
            <div class="grid__unit--1of3">
                1of3 in 4of5
            </div>
            <div class="grid__unit--2of3">
                2of3 in 4of5
            </div>
        </div>
    </div>
</div>
```
*/

$grid-steps: 5;
$grid-gutter: 12px;

.grid__line {
    @include clearfix();

    margin: 0 (-1 * $grid-gutter);
    box-sizing: border-box;
    
    > div {
        box-sizing: border-box;
    }
}

@mixin grid-class($steps, $gutter) {
    @for $i from 1 through $steps {
        @for $k from 1 through $i {
            .grid__unit--#{$k}of#{$i} {
                float: left;
                width: 100% / $i * $k;
                padding: 0 $gutter;
            }
        }
    }
}

@include grid-class($grid-steps, $grid-gutter);

/*doc
---
title: Grid without gutter
name: grid_without_gutter
category: base
---

```html_example
<div class="grid__line grid__line--no-gutter">
    <div class="grid__unit--1of2">
        2 Col
    </div>
    <div class="grid__unit--1of2">
        2 Col
    </div>
</div>
```
*/

.grid__line--no-gutter {
    margin: 0;

    @include grid-class($grid-steps, 0px);
}