Sass grid construction

_mixin-better.scss

// Still need to work out how to combine rules for numbers
// that share a greatest common factor without the unit-builder
// actually containing the fraction to which they can both be
// reduced.

// Calculate 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;
    }
}

// Fluid grid units & offsets
@mixin units-build($units) {
    @each $n in $units {
        // avoids writing rules like `unit-12-12`
        // just use a generic `unit-full` class
        $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);

            .unit-#{$i}-#{$n} {
                // if this unit can be reduced
                // extend the previous rule
                @if $i-r and $canreduce {
                    @extend .unit-#{$i-r}-#{$n-r};
                }
                // otherwise create a new width
                @else {
                    width: percentage($i / $n);
                }
            }
        }
    }
}

@include units-build(2 3 4 5 6 12);

_mixin-default.scss

@mixin units-build($units) {
    @each $n in $units {
        $x: $n - 1;

        @for $i from 1 through $x {
            // units
            .unit-#{$i}-#{$n} {
                width: percentage($i / $n);
            }
        }
    }
}

@include units-build(2 3 4 5 6 12);

output-better.css

.unit-1-2,
.unit-2-4,
.unit-3-6,
.unit-6-12 {
    width: 50%;
}

.unit-1-3,
.unit-2-6,
.unit-4-12 {
    width: 33.333%;
}

.unit-2-3,
.unit-4-6,
.unit-8-12 {
    width: 66.667%;
}

.unit-1-4,
.unit-3-12 {
    width: 25%;
}

.unit-3-4,
.unit-9-12 {
    width: 75%;
}

.unit-1-5 {
    width: 20%;
}

.unit-2-5 {
    width: 40%;
}

.unit-3-5 {
    width: 60%;
}

.unit-4-5 {
    width: 80%;
}

.unit-1-6,
.unit-2-12 {
    width: 16.667%;
}

.unit-5-6,
.unit-10-12 {
    width: 83.333%;
}

.unit-1-12 {
    width: 8.333%;
}

.unit-5-12 {
    width: 41.667%;
}

.unit-7-12 {
    width: 58.333%;
}

.unit-11-12 {
    width: 91.667%;
}

output-default.css

.unit-1-2 {
    width: 50%;
}

.unit-1-3 {
    width: 33.333%;
}

.unit-2-3 {
    width: 66.667%;
}

.unit-1-4 {
    width: 25%;
}

.unit-2-4 {
    width: 50%;
}

.unit-3-4 {
    width: 75%;
}

.unit-1-5 {
    width: 20%;
}

.unit-2-5 {
    width: 40%;
}

.unit-3-5 {
    width: 60%;
}

.unit-4-5 {
    width: 80%;
}

.unit-1-6 {
    width: 16.667%;
}

.unit-2-6 {
    width: 33.333%;
}

.unit-3-6 {
    width: 50%;
}

.unit-4-6 {
    width: 66.667%;
}

.unit-5-6 {
    width: 83.333%;
}

.unit-1-12 {
    width: 8.333%;
}

.unit-2-12 {
    width: 16.667%;
}

.unit-3-12 {
    width: 25%;
}

.unit-4-12 {
    width: 33.333%;
}

.unit-5-12 {
    width: 41.667%;
}

.unit-6-12 {
    width: 50%;
}

.unit-7-12 {
    width: 58.333%;
}

.unit-8-12 {
    width: 66.667%;
}

.unit-9-12 {
    width: 75%;
}

.unit-10-12 {
    width: 83.333%;
}

.unit-11-12 {
    width: 91.667%;
}