Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

// Modified version of Harry Roberts' width mixin.
// https://github.com/csswizardry/discovr/blob/master/css/_trumps.widths.scss

// A mixin to spit out our width classes. Pass in the total number of columns 
// we want to have, and an optional suffix for responsive widths. The widths are
// output as the lowest expression of a fraction, e.g. 1/2 instead of 3/6.

@function gcd($a, $b) {
    // Returns the greatest common denominator.
    @if($b == 0) {
         @return $a;
    }

    @return gcd($b, $a % $b);
}

@mixin widths($total, $breakpoint: '') {
    // Loop through each column
    @for $i from 1 through $total - 1 {
        $gcd: gcd($i, $total);
        $numerator: $i/$gcd;
        $denominator: $total/$gcd;
        
        // Build a class in the format `.u-3/4.
        .u-#{$numerator}\/#{$denominator}#{$breakpoint} {
            width: $i/$total * 100% !important;
        }
    }
}

// A series of width helper classes that you can use to size things like grid
// systems. Classes can take a fraction-like format (e.g. `.u-2/3`) or a spoken-
// word format (e.g. `.u-2-of-3`). Use these in your markup:
//
// <div class="u-1/3">

@include widths(6);

// Use the optional suffix for responsive widths within media queries. E.g:
//
// <div class="u-1/3@sm">

@media screen and (max-width: 480px) {
    @include widths(6, \@sm);
}

SassMeister-output.css

.u-1\/6 {
  width: 16.66667% !important;
}

.u-1\/3 {
  width: 33.33333% !important;
}

.u-1\/2 {
  width: 50% !important;
}

.u-2\/3 {
  width: 66.66667% !important;
}

.u-5\/6 {
  width: 83.33333% !important;
}

@media screen and (max-width: 480px) {
  .u-1\/6\@sm {
    width: 16.66667% !important;
  }

  .u-1\/3\@sm {
    width: 33.33333% !important;
  }

  .u-1\/2\@sm {
    width: 50% !important;
  }

  .u-2\/3\@sm {
    width: 66.66667% !important;
  }

  .u-5\/6\@sm {
    width: 83.33333% !important;
  }
}