Generate human friendly proportional size classes

_sizes.scss

// Based on the code in Griddle by @necolas
// http://necolas.github.com/griddle/

// =============================================================================
// Helper Functions
// =============================================================================

// Find the greatest common factor of two integers
@function gcf($a, $b) {
    @if $b == 0 {
        @return $a;
    }
    @else {
        @return gcf($b, $a % $b)
    }
}

// Check if a list contains a value
@function contains($list, $value) {
    @if type-of($list) == list {
        @return not not index($list, $value);
    }
    @else {
        @return $list == $value;
    }
}

// Map integers to their English word equivalents
@function numerator-to-word($n) {
    @return nth(one two three four five six seven eight nine ten eleven twelve, $n);
}

// Map fraction denominators to their English word equivalents
@function denominator-to-word($d, $n) {
    $d: nth(whole half third fourth fifth sixth seventh eighth ninth tenth eleventh twelfth, $d);
    // Pluralize the denominator if the numerator is greater than 1.
    // 2/3 becomes two-thirds rather than two-third
    @if $n > 1 {
        $d: #{$d}s;
    }
    @return $d;
}
    
// =============================================================================
// Mixins
// =============================================================================

// Proportional width mixin.
@mixin proportional-sizes($units, $property: 'width', $prefix: 's-', $suffix: '', $separator: '-', $type: int) {

    // Step through each value in the list of units
    @each $n in $units {
        $x: $n;

        // Avoid creating rules like `.twelve-twelfths {}`
        @if $n > 1 {
            $x: $n - 1;
        }

        @for $i from 1 through $x {
            // Find the greatest common factor
            $g: gcf($i, $n);

            // Initialize variables
            $i-r: ();
            $n-r: ();

            @if $g > 1 {
                // Reduced value of $i
                $i-r: $i/$g;
                // Reduced value of $n
                $n-r: $n/$g;
            }

            // Check if the reduced value of $n was also supplied
            // in the list of units to be built
            $canreduce: contains($units, $n-r);

            $numerator: $i;
            $denominator: $n;

            // Use human friendly names rather than numbers
            @if $type == words {
                $numerator: numerator-to-word($i);
                $denominator: denominator-to-word($n, $i);
            }

            // Create units based on fractions
            .#{$prefix}#{$numerator}#{$separator}#{$denominator}#{$suffix} {
                // If this unit can be reduced then extend the previous rule
                @if $i-r and $canreduce {
                    $numerator-r: $i-r;
                    $denominator-r: $n-r;

                    // Use human friendly names rather than numbers
                    @if $type == words {
                        $numerator-r: numerator-to-word($i-r);
                        $denominator-r: denominator-to-word($n-r, $i-r);
                    }

                    @extend .#{$prefix}#{$numerator-r}#{$separator}#{$denominator-r}#{$suffix};
                }
                // Otherwise create a new % value
                @else {
                    #{$property}: percentage($i / $n);
                }

                @content;
            }
        }
    }
}

example.scss

@import "sizes";

/*------------------------------------*\
    $PUSH
\*------------------------------------*/
.push { position: relative; }
@include proportional-sizes(2 3 4 5 6 8 10 12, left, $prefix: 'push--', $type: words) { @extend .push; }


/*------------------------------------*\
    $PULL
\*------------------------------------*/
.pull { position: relative; }
@include proportional-sizes(2 3 4 5 6 8 10 12, left, $prefix: 'pull--', $type: words) { @extend .pull; }


/*------------------------------------*\
    $WIDTHS
\*------------------------------------*/
@include proportional-sizes(1 2 3 4 5 6 8 10 12, $prefix: '', $type: words);


/*------------------------------------*\
    $RESPONSIVE-WIDTHS
\*------------------------------------*/
@media only screen and (min-width: 800px) {
    @include proportional-sizes(1 2 3 4 5 6 8 10 12, $prefix: 'desktop-', $type: words);
}