Loop in SASS for basic grid system

To create a basic grid system using scss

$total-columns: 6; 
$col-widths: ();
@for $i from 1 through $total-columns {
    @for $j from 1 through $i {
        $w: ($j/$i);

        @if index($col-widths, $w) == false {
            .col-#{$j}-#{$i} {
                width: $w * 100%;
            }

            $col-widths: append($col-widths, $w, comma);
        }

    }
}

This will output:

.col-1-1 { width: 100%; }
.col-1-2 { width: 50%; }
.col-1-3 { width: 33.33333%; }
.col-2-3 { width: 66.66667%; }
.col-1-4 { width: 25%; }
.col-3-4 { width: 75%; }
.col-1-5 { width: 20%; }
.col-2-5 { width: 40%; }
.col-3-5 { width: 60%; }
.col-4-5 { width: 80%; }
.col-1-6 { width: 16.66667%; }
.col-5-6 { width: 83.33333%; }

Just change the $total-columns variable to the amount of grid columns you need.

You can see a working example at Codepen