Sass grid column generator

grid.scss

// ========================================================================== \\
// About
// ========================================================================== \\

// The Sass below will generate a class for each of the columns required to 
// fill your grid. For example, a four column grid requires columns with 
// widths of 1/4, 1/2 and 3/4.

// |----|    |    |    |
// |1/4 |
// |----|----|    |    |
// |1/2      |
// |----|----|----|    |
// |3/4           |
// |----|----|----|----|
// |1                  |
// |----|----|----|----|

// Class names are formatted as .col--1\/4, which can be referenced in your
// HTML as class="col--1/4". 

// ========================================================================== \\
// But why?
// ========================================================================== \\

// You could use names based on decimal percentages but that get's tricky 
// width numbers like 8.333%. You could also format the names as "col--1-12"
// but personally I don't think that looks very nice.

// Working out each column width manually is time consuming, especially if 
// your freindly designer changes the number of columns in the grid.

// This method automagically generates each column class expressed as it's 
// simplest fraction, so you'll never get a 2/4 class. If the number of 
// columns changes your column widths are instantly up to date. 

// ========================================================================== \\
// The code
// ========================================================================== \\

// The total number of columns
$cols: 12;

// Find the greatest common divisor
// http://en.wikipedia.org/wiki/Greatest_common_divisor#Reducing_fractions
@function gcd($a, $b) {
    @if($b == 0) {
         @return $a;
    }

    $r: $a % $b;

    @return gcd($b, $r);
}

// Our standard column
.col {
    float: left;
}

// For each of our columns
@for $i from 1 through $cols - 1 {
    // Find the simplest expression of the fraction
    $gcd: gcd($i, $cols);
    // Get the top and bottom parts of the fraction
    $numerator: $i/$gcd;
    $denominator: $cols/$gcd;

    // Generate a class with a fraction based name
    .col--#{$numerator}\/#{$denominator} {
        @extend %col;
        width: $i/$cols * 100%;
    }

}

// ========================================================================== \\
// The output
// ========================================================================== \\

// The code above outputs the following. Remember you don't need to use the 
// escaped class name in the HTML, so .col--1\/12 will be class="col--1/12".

// .col--1\/12,
// .col--1\/6,
// .col--1\/4,
// .col--1\/3,
// .col--5\/12,
// .col--1\/2,
// .col--7\/12,
// .col--2\/3,
// .col--3\/4,
// .col--5\/6,
// .col--11\/12 {
//     float: left;
// }
// 
// .col--1\/12 {
//     width: 8.33333%;
// }
// 
// .col--1\/6 {
//     width: 16.66667%;
// }
// 
// .col--1\/4 {
//     width: 25%;
// }
// 
// .col--1\/3 {
//     width: 33.33333%;
// }
// 
// .col--5\/12 {
//     width: 41.66667%;
// }
// 
// .col--1\/2 {
//     width: 50%;
// }
// 
// .col--7\/12 {
//     width: 58.33333%;
// }
// 
// .col--2\/3 {
//     width: 66.66667%;
// }
// 
// .col--3\/4 {
//     width: 75%;
// }
// 
// .col--5\/6 {
//     width: 83.33333%;
// }
// 
// .col--11\/12 {
//     width: 91.66667%;
// }