Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/**
 * Responsive widths
 * @namespace u- Utility
 * @url http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
 */

$width-numerator: one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thriteen, fourteen, fifteen, sixteen;
$width-denominator: whole, half, third, quarter, fifth, sixth, seventh, eighth, ninth, tenth, eleventh, twelfth, thirtheenth, fourteenth, fifteenth, sixteenth;
$width-denominators: whole, halfs, thirds, quarters, fifths, sixths, sevenths, eighths, ninths, tenths, elevenths, twelfths, thirtheenths, fourteenths, fifteenths, sixteenths;

$screen-breakpoint-labels: xs, sm, md, lg, xl !default;
$screen-breakpoints: 360, 480, 768, 1024, 1400 !default;

$width-columns: 12;

//////////

@function percentFromFraction($x, $y) {
  @return $x / $y * 100%;
}

@function fractionToString($num, $den) {
  @if $num <= 1 {
    @return #{nth($width-numerator, $num)}-#{nth($width-denominator, $den)};
  } @else {
    @return #{nth($width-numerator, $num)}-#{nth($width-denominators, $den)};
  }
}

@mixin fractionalWidth($count, $prefix) {
  @for $fraction from $count through $width-columns {
    $pre: '' !default;
    @if $prefix {
      $pre: u-#{$prefix}-;
    }
    .#{$pre}#{fractionToString($count, $fraction)} {
      width: percentFromFraction($count, $fraction);
    }
  }
}

// The initial loop handles width classes without prefixes
@for $count from 1 through $width-columns {
  @include fractionalWidth($count, false);
}

// This second loop includes the @media queries and prefixes
@each $size in $screen-breakpoint-labels {
  $index: index($screen-breakpoint-labels, $size);
  
  $media-conditions: 'min-width: #{nth($screen-breakpoints, $index) + 1 +px}';
  @if $index == 1 {
    $media-conditions: 'max-width: #{nth($screen-breakpoints, $index + 1) +px}';
  }

  @media (#{$media-conditions}) {
    @for $count from 1 through $width-columns {
      @include fractionalWidth($count, $size);
    }
  }
}

SassMeister-output.css

/** Responsive widths @namespace u- Utility @url http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/ */
.one-whole { width: 100%; }

.one-half { width: 50%; }

.one-third { width: 33.33333%; }

.one-quarter { width: 25%; }

.one-fifth { width: 20%; }

.one-sixth { width: 16.66667%; }

.one-seventh { width: 14.28571%; }

.one-eighth { width: 12.5%; }

.one-ninth { width: 11.11111%; }

.one-tenth { width: 10%; }

.one-eleventh { width: 9.09091%; }

.one-twelfth { width: 8.33333%; }

.two-halfs { width: 100%; }

.two-thirds { width: 66.66667%; }

.two-quarters { width: 50%; }

.two-fifths { width: 40%; }

.two-sixths { width: 33.33333%; }

.two-sevenths { width: 28.57143%; }

.two-eighths { width: 25%; }

.two-ninths { width: 22.22222%; }

.two-tenths { width: 20%; }

.two-elevenths { width: 18.18182%; }

.two-twelfths { width: 16.66667%; }

.three-thirds { width: 100%; }

.three-quarters { width: 75%; }

.three-fifths { width: 60%; }

.three-sixths { width: 50%; }

.three-sevenths { width: 42.85714%; }

.three-eighths { width: 37.5%; }

.three-ninths { width: 33.33333%; }

.three-tenths { width: 30%; }

.three-elevenths { width: 27.27273%; }

.three-twelfths { width: 25%; }

.four-quarters { width: 100%; }

.four-fifths { width: 80%; }

.four-sixths { width: 66.66667%; }

.four-sevenths { width: 57.14286%; }

.four-eighths { width: 50%; }

.four-ninths { width: 44.44444%; }

.four-tenths { width: 40%; }

.four-elevenths { width: 36.36364%; }

.four-twelfths { width: 33.33333%; }

.five-fifths { width: 100%; }

.five-sixths { width: 83.33333%; }

.five-sevenths { width: 71.42857%; }

.five-eighths { width: 62.5%; }

.five-ninths { width: 55.55556%; }

.five-tenths { width: 50%; }

.five-elevenths { width: 45.45455%; }

.five-twelfths { width: 41.66667%; }

.six-sixths { width: 100%; }

.six-sevenths { width: 85.71429%; }

.six-eighths { width: 75%; }

.six-ninths { width: 66.66667%; }

.six-tenths { width: 60%; }

.six-elevenths { width: 54.54545%; }

.six-twelfths { width: 50%; }

.seven-sevenths { width: 100%; }

.seven-eighths { width: 87.5%; }

.seven-ninths { width: 77.77778%; }

.seven-tenths { width: 70%; }

.seven-elevenths { width: 63.63636%; }

.seven-twelfths { width: 58.33333%; }

.eight-eighths { width: 100%; }

.eight-ninths { width: 88.88889%; }

.eight-tenths { width: 80%; }

.eight-elevenths { width: 72.72727%; }

.eight-twelfths { width: 66.66667%; }

.nine-ninths { width: 100%; }

.nine-tenths { width: 90%; }

.nine-elevenths { width: 81.81818%; }

.nine-twelfths { width: 75%; }

.ten-tenths { width: 100%; }

.ten-elevenths { width: 90.90909%; }

.ten-twelfths { width: 83.33333%; }

.eleven-elevenths { width: 100%; }

.eleven-twelfths { width: 91.66667%; }

.twelve-twelfths { width: 100%; }

@media (max-width: 480px) { .u-xs-one-whole { width: 100%; }
  .u-xs-one-half { width: 50%; }
  .u-xs-one-third { width: 33.33333%; }
  .u-xs-one-quarter { width: 25%; }
  .u-xs-one-fifth { width: 20%; }
  .u-xs-one-sixth { width: 16.66667%; }
  .u-xs-one-seventh { width: 14.28571%; }
  .u-xs-one-eighth { width: 12.5%; }
  .u-xs-one-ninth { width: 11.11111%; }
  .u-xs-one-tenth { width: 10%; }
  .u-xs-one-eleventh { width: 9.09091%; }
  .u-xs-one-twelfth { width: 8.33333%; }
  .u-xs-two-halfs { width: 100%; }
  .u-xs-two-thirds { width: 66.66667%; }
  .u-xs-two-quarters { width: 50%; }
  .u-xs-two-fifths { width: 40%; }
  .u-xs-two-sixths { width: 33.33333%; }
  .u-xs-two-sevenths { width: 28.57143%; }
  .u-xs-two-eighths { width: 25%; }
  .u-xs-two-ninths { width: 22.22222%; }
  .u-xs-two-tenths { width: 20%; }
  .u-xs-two-elevenths { width: 18.18182%; }
  .u-xs-two-twelfths { width: 16.66667%; }
  .u-xs-three-thirds { width: 100%; }
  .u-xs-three-quarters { width: 75%; }
  .u-xs-three-fifths { width: 60%; }
  .u-xs-three-sixths { width: 50%; }
  .u-xs-three-sevenths { width: 42.85714%; }
  .u-xs-three-eighths { width: 37.5%; }
  .u-xs-three-ninths { width: 33.33333%; }
  .u-xs-three-tenths { width: 30%; }
  .u-xs-three-elevenths { width: 27.27273%; }
  .u-xs-three-twelfths { width: 25%; }
  .u-xs-four-quarters { width: 100%; }
  .u-xs-four-fifths { width: 80%; }
  .u-xs-four-sixths { width: 66.66667%; }
  .u-xs-four-sevenths { width: 57.14286%; }
  .u-xs-four-eighths { width: 50%; }
  .u-xs-four-ninths { width: 44.44444%; }
  .u-xs-four-tenths { width: 40%; }
  .u-xs-four-elevenths { width: 36.36364%; }
  .u-xs-four-twelfths { width: 33.33333%; }
  .u-xs-five-fifths { width: 100%; }
  .u-xs-five-sixths { width: 83.33333%; }
  .u-xs-five-sevenths { width: 71.42857%; }
  .u-xs-five-eighths { width: 62.5%; }
  .u-xs-five-ninths { width: 55.55556%; }
  .u-xs-five-tenths { width: 50%; }
  .u-xs-five-elevenths { width: 45.45455%; }
  .u-xs-five-twelfths { width: 41.66667%; }
  .u-xs-six-sixths { width: 100%; }
  .u-xs-six-sevenths { width: 85.71429%; }
  .u-xs-six-eighths { width: 75%; }
  .u-xs-six-ninths { width: 66.66667%; }
  .u-xs-six-tenths { width: 60%; }
  .u-xs-six-elevenths { width: 54.54545%; }
  .u-xs-six-twelfths { width: 50%; }
  .u-xs-seven-sevenths { width: 100%; }
  .u-xs-seven-eighths { width: 87.5%; }
  .u-xs-seven-ninths { width: 77.77778%; }
  .u-xs-seven-tenths { width: 70%; }
  .u-xs-seven-elevenths { width: 63.63636%; }
  .u-xs-seven-twelfths { width: 58.33333%; }
  .u-xs-eight-eighths { width: 100%; }
  .u-xs-eight-ninths { width: 88.88889%; }
  .u-xs-eight-tenths { width: 80%; }
  .u-xs-eight-elevenths { width: 72.72727%; }
  .u-xs-eight-twelfths { width: 66.66667%; }
  .u-xs-nine-ninths { width: 100%; }
  .u-xs-nine-tenths { width: 90%; }
  .u-xs-nine-elevenths { width: 81.81818%; }
  .u-xs-nine-twelfths { width: 75%; }
  .u-xs-ten-tenths { width: 100%; }
  .u-xs-ten-elevenths { width: 90.90909%; }
  .u-xs-ten-twelfths { width: 83.33333%; }
  .u-xs-eleven-elevenths { width: 100%; }
  .u-xs-eleven-twelfths { width: 91.66667%; }
  .u-xs-twelve-twelfths { width: 100%; } }

@media (min-width: 481px) { .u-sm-one-whole { width: 100%; }
  .u-sm-one-half { width: 50%; }
  .u-sm-one-third { width: 33.33333%; }
  .u-sm-one-quarter { width: 25%; }
  .u-sm-one-fifth { width: 20%; }
  .u-sm-one-sixth { width: 16.66667%; }
  .u-sm-one-seventh { width: 14.28571%; }
  .u-sm-one-eighth { width: 12.5%; }
  .u-sm-one-ninth { width: 11.11111%; }
  .u-sm-one-tenth { width: 10%; }
  .u-sm-one-eleventh { width: 9.09091%; }
  .u-sm-one-twelfth { width: 8.33333%; }
  .u-sm-two-halfs { width: 100%; }
  .u-sm-two-thirds { width: 66.66667%; }
  .u-sm-two-quarters { width: 50%; }
  .u-sm-two-fifths { width: 40%; }
  .u-sm-two-sixths { width: 33.33333%; }
  .u-sm-two-sevenths { width: 28.57143%; }
  .u-sm-two-eighths { width: 25%; }
  .u-sm-two-ninths { width: 22.22222%; }
  .u-sm-two-tenths { width: 20%; }
  .u-sm-two-elevenths { width: 18.18182%; }
  .u-sm-two-twelfths { width: 16.66667%; }
  .u-sm-three-thirds { width: 100%; }
  .u-sm-three-quarters { width: 75%; }
  .u-sm-three-fifths { width: 60%; }
  .u-sm-three-sixths { width: 50%; }
  .u-sm-three-sevenths { width: 42.85714%; }
  .u-sm-three-eighths { width: 37.5%; }
  .u-sm-three-ninths { width: 33.33333%; }
  .u-sm-three-tenths { width: 30%; }
  .u-sm-three-elevenths { width: 27.27273%; }
  .u-sm-three-twelfths { width: 25%; }
  .u-sm-four-quarters { width: 100%; }
  .u-sm-four-fifths { width: 80%; }
  .u-sm-four-sixths { width: 66.66667%; }
  .u-sm-four-sevenths { width: 57.14286%; }
  .u-sm-four-eighths { width: 50%; }
  .u-sm-four-ninths { width: 44.44444%; }
  .u-sm-four-tenths { width: 40%; }
  .u-sm-four-elevenths { width: 36.36364%; }
  .u-sm-four-twelfths { width: 33.33333%; }
  .u-sm-five-fifths { width: 100%; }
  .u-sm-five-sixths { width: 83.33333%; }
  .u-sm-five-sevenths { width: 71.42857%; }
  .u-sm-five-eighths { width: 62.5%; }
  .u-sm-five-ninths { width: 55.55556%; }
  .u-sm-five-tenths { width: 50%; }
  .u-sm-five-elevenths { width: 45.45455%; }
  .u-sm-five-twelfths { width: 41.66667%; }
  .u-sm-six-sixths { width: 100%; }
  .u-sm-six-sevenths { width: 85.71429%; }
  .u-sm-six-eighths { width: 75%; }
  .u-sm-six-ninths { width: 66.66667%; }
  .u-sm-six-tenths { width: 60%; }
  .u-sm-six-elevenths { width: 54.54545%; }
  .u-sm-six-twelfths { width: 50%; }
  .u-sm-seven-sevenths { width: 100%; }
  .u-sm-seven-eighths { width: 87.5%; }
  .u-sm-seven-ninths { width: 77.77778%; }
  .u-sm-seven-tenths { width: 70%; }
  .u-sm-seven-elevenths { width: 63.63636%; }
  .u-sm-seven-twelfths { width: 58.33333%; }
  .u-sm-eight-eighths { width: 100%; }
  .u-sm-eight-ninths { width: 88.88889%; }
  .u-sm-eight-tenths { width: 80%; }
  .u-sm-eight-elevenths { width: 72.72727%; }
  .u-sm-eight-twelfths { width: 66.66667%; }
  .u-sm-nine-ninths { width: 100%; }
  .u-sm-nine-tenths { width: 90%; }
  .u-sm-nine-elevenths { width: 81.81818%; }
  .u-sm-nine-twelfths { width: 75%; }
  .u-sm-ten-tenths { width: 100%; }
  .u-sm-ten-elevenths { width: 90.90909%; }
  .u-sm-ten-twelfths { width: 83.33333%; }
  .u-sm-eleven-elevenths { width: 100%; }
  .u-sm-eleven-twelfths { width: 91.66667%; }
  .u-sm-twelve-twelfths { width: 100%; } }

@media (min-width: 769px) { .u-md-one-whole { width: 100%; }
  .u-md-one-half { width: 50%; }
  .u-md-one-third { width: 33.33333%; }
  .u-md-one-quarter { width: 25%; }
  .u-md-one-fifth { width: 20%; }
  .u-md-one-sixth { width: 16.66667%; }
  .u-md-one-seventh { width: 14.28571%; }
  .u-md-one-eighth { width: 12.5%; }
  .u-md-one-ninth { width: 11.11111%; }
  .u-md-one-tenth { width: 10%; }
  .u-md-one-eleventh { width: 9.09091%; }
  .u-md-one-twelfth { width: 8.33333%; }
  .u-md-two-halfs { width: 100%; }
  .u-md-two-thirds { width: 66.66667%; }
  .u-md-two-quarters { width: 50%; }
  .u-md-two-fifths { width: 40%; }
  .u-md-two-sixths { width: 33.33333%; }
  .u-md-two-sevenths { width: 28.57143%; }
  .u-md-two-eighths { width: 25%; }
  .u-md-two-ninths { width: 22.22222%; }
  .u-md-two-tenths { width: 20%; }
  .u-md-two-elevenths { width: 18.18182%; }
  .u-md-two-twelfths { width: 16.66667%; }
  .u-md-three-thirds { width: 100%; }
  .u-md-three-quarters { width: 75%; }
  .u-md-three-fifths { width: 60%; }
  .u-md-three-sixths { width: 50%; }
  .u-md-three-sevenths { width: 42.85714%; }
  .u-md-three-eighths { width: 37.5%; }
  .u-md-three-ninths { width: 33.33333%; }
  .u-md-three-tenths { width: 30%; }
  .u-md-three-elevenths { width: 27.27273%; }
  .u-md-three-twelfths { width: 25%; }
  .u-md-four-quarters { width: 100%; }
  .u-md-four-fifths { width: 80%; }
  .u-md-four-sixths { width: 66.66667%; }
  .u-md-four-sevenths { width: 57.14286%; }
  .u-md-four-eighths { width: 50%; }
  .u-md-four-ninths { width: 44.44444%; }
  .u-md-four-tenths { width: 40%; }
  .u-md-four-elevenths { width: 36.36364%; }
  .u-md-four-twelfths { width: 33.33333%; }
  .u-md-five-fifths { width: 100%; }
  .u-md-five-sixths { width: 83.33333%; }
  .u-md-five-sevenths { width: 71.42857%; }
  .u-md-five-eighths { width: 62.5%; }
  .u-md-five-ninths { width: 55.55556%; }
  .u-md-five-tenths { width: 50%; }
  .u-md-five-elevenths { width: 45.45455%; }
  .u-md-five-twelfths { width: 41.66667%; }
  .u-md-six-sixths { width: 100%; }
  .u-md-six-sevenths { width: 85.71429%; }
  .u-md-six-eighths { width: 75%; }
  .u-md-six-ninths { width: 66.66667%; }
  .u-md-six-tenths { width: 60%; }
  .u-md-six-elevenths { width: 54.54545%; }
  .u-md-six-twelfths { width: 50%; }
  .u-md-seven-sevenths { width: 100%; }
  .u-md-seven-eighths { width: 87.5%; }
  .u-md-seven-ninths { width: 77.77778%; }
  .u-md-seven-tenths { width: 70%; }
  .u-md-seven-elevenths { width: 63.63636%; }
  .u-md-seven-twelfths { width: 58.33333%; }
  .u-md-eight-eighths { width: 100%; }
  .u-md-eight-ninths { width: 88.88889%; }
  .u-md-eight-tenths { width: 80%; }
  .u-md-eight-elevenths { width: 72.72727%; }
  .u-md-eight-twelfths { width: 66.66667%; }
  .u-md-nine-ninths { width: 100%; }
  .u-md-nine-tenths { width: 90%; }
  .u-md-nine-elevenths { width: 81.81818%; }
  .u-md-nine-twelfths { width: 75%; }
  .u-md-ten-tenths { width: 100%; }
  .u-md-ten-elevenths { width: 90.90909%; }
  .u-md-ten-twelfths { width: 83.33333%; }
  .u-md-eleven-elevenths { width: 100%; }
  .u-md-eleven-twelfths { width: 91.66667%; }
  .u-md-twelve-twelfths { width: 100%; } }

@media (min-width: 1025px) { .u-lg-one-whole { width: 100%; }
  .u-lg-one-half { width: 50%; }
  .u-lg-one-third { width: 33.33333%; }
  .u-lg-one-quarter { width: 25%; }
  .u-lg-one-fifth { width: 20%; }
  .u-lg-one-sixth { width: 16.66667%; }
  .u-lg-one-seventh { width: 14.28571%; }
  .u-lg-one-eighth { width: 12.5%; }
  .u-lg-one-ninth { width: 11.11111%; }
  .u-lg-one-tenth { width: 10%; }
  .u-lg-one-eleventh { width: 9.09091%; }
  .u-lg-one-twelfth { width: 8.33333%; }
  .u-lg-two-halfs { width: 100%; }
  .u-lg-two-thirds { width: 66.66667%; }
  .u-lg-two-quarters { width: 50%; }
  .u-lg-two-fifths { width: 40%; }
  .u-lg-two-sixths { width: 33.33333%; }
  .u-lg-two-sevenths { width: 28.57143%; }
  .u-lg-two-eighths { width: 25%; }
  .u-lg-two-ninths { width: 22.22222%; }
  .u-lg-two-tenths { width: 20%; }
  .u-lg-two-elevenths { width: 18.18182%; }
  .u-lg-two-twelfths { width: 16.66667%; }
  .u-lg-three-thirds { width: 100%; }
  .u-lg-three-quarters { width: 75%; }
  .u-lg-three-fifths { width: 60%; }
  .u-lg-three-sixths { width: 50%; }
  .u-lg-three-sevenths { width: 42.85714%; }
  .u-lg-three-eighths { width: 37.5%; }
  .u-lg-three-ninths { width: 33.33333%; }
  .u-lg-three-tenths { width: 30%; }
  .u-lg-three-elevenths { width: 27.27273%; }
  .u-lg-three-twelfths { width: 25%; }
  .u-lg-four-quarters { width: 100%; }
  .u-lg-four-fifths { width: 80%; }
  .u-lg-four-sixths { width: 66.66667%; }
  .u-lg-four-sevenths { width: 57.14286%; }
  .u-lg-four-eighths { width: 50%; }
  .u-lg-four-ninths { width: 44.44444%; }
  .u-lg-four-tenths { width: 40%; }
  .u-lg-four-elevenths { width: 36.36364%; }
  .u-lg-four-twelfths { width: 33.33333%; }
  .u-lg-five-fifths { width: 100%; }
  .u-lg-five-sixths { width: 83.33333%; }
  .u-lg-five-sevenths { width: 71.42857%; }
  .u-lg-five-eighths { width: 62.5%; }
  .u-lg-five-ninths { width: 55.55556%; }
  .u-lg-five-tenths { width: 50%; }
  .u-lg-five-elevenths { width: 45.45455%; }
  .u-lg-five-twelfths { width: 41.66667%; }
  .u-lg-six-sixths { width: 100%; }
  .u-lg-six-sevenths { width: 85.71429%; }
  .u-lg-six-eighths { width: 75%; }
  .u-lg-six-ninths { width: 66.66667%; }
  .u-lg-six-tenths { width: 60%; }
  .u-lg-six-elevenths { width: 54.54545%; }
  .u-lg-six-twelfths { width: 50%; }
  .u-lg-seven-sevenths { width: 100%; }
  .u-lg-seven-eighths { width: 87.5%; }
  .u-lg-seven-ninths { width: 77.77778%; }
  .u-lg-seven-tenths { width: 70%; }
  .u-lg-seven-elevenths { width: 63.63636%; }
  .u-lg-seven-twelfths { width: 58.33333%; }
  .u-lg-eight-eighths { width: 100%; }
  .u-lg-eight-ninths { width: 88.88889%; }
  .u-lg-eight-tenths { width: 80%; }
  .u-lg-eight-elevenths { width: 72.72727%; }
  .u-lg-eight-twelfths { width: 66.66667%; }
  .u-lg-nine-ninths { width: 100%; }
  .u-lg-nine-tenths { width: 90%; }
  .u-lg-nine-elevenths { width: 81.81818%; }
  .u-lg-nine-twelfths { width: 75%; }
  .u-lg-ten-tenths { width: 100%; }
  .u-lg-ten-elevenths { width: 90.90909%; }
  .u-lg-ten-twelfths { width: 83.33333%; }
  .u-lg-eleven-elevenths { width: 100%; }
  .u-lg-eleven-twelfths { width: 91.66667%; }
  .u-lg-twelve-twelfths { width: 100%; } }

@media (min-width: 1401px) { .u-xl-one-whole { width: 100%; }
  .u-xl-one-half { width: 50%; }
  .u-xl-one-third { width: 33.33333%; }
  .u-xl-one-quarter { width: 25%; }
  .u-xl-one-fifth { width: 20%; }
  .u-xl-one-sixth { width: 16.66667%; }
  .u-xl-one-seventh { width: 14.28571%; }
  .u-xl-one-eighth { width: 12.5%; }
  .u-xl-one-ninth { width: 11.11111%; }
  .u-xl-one-tenth { width: 10%; }
  .u-xl-one-eleventh { width: 9.09091%; }
  .u-xl-one-twelfth { width: 8.33333%; }
  .u-xl-two-halfs { width: 100%; }
  .u-xl-two-thirds { width: 66.66667%; }
  .u-xl-two-quarters { width: 50%; }
  .u-xl-two-fifths { width: 40%; }
  .u-xl-two-sixths { width: 33.33333%; }
  .u-xl-two-sevenths { width: 28.57143%; }
  .u-xl-two-eighths { width: 25%; }
  .u-xl-two-ninths { width: 22.22222%; }
  .u-xl-two-tenths { width: 20%; }
  .u-xl-two-elevenths { width: 18.18182%; }
  .u-xl-two-twelfths { width: 16.66667%; }
  .u-xl-three-thirds { width: 100%; }
  .u-xl-three-quarters { width: 75%; }
  .u-xl-three-fifths { width: 60%; }
  .u-xl-three-sixths { width: 50%; }
  .u-xl-three-sevenths { width: 42.85714%; }
  .u-xl-three-eighths { width: 37.5%; }
  .u-xl-three-ninths { width: 33.33333%; }
  .u-xl-three-tenths { width: 30%; }
  .u-xl-three-elevenths { width: 27.27273%; }
  .u-xl-three-twelfths { width: 25%; }
  .u-xl-four-quarters { width: 100%; }
  .u-xl-four-fifths { width: 80%; }
  .u-xl-four-sixths { width: 66.66667%; }
  .u-xl-four-sevenths { width: 57.14286%; }
  .u-xl-four-eighths { width: 50%; }
  .u-xl-four-ninths { width: 44.44444%; }
  .u-xl-four-tenths { width: 40%; }
  .u-xl-four-elevenths { width: 36.36364%; }
  .u-xl-four-twelfths { width: 33.33333%; }
  .u-xl-five-fifths { width: 100%; }
  .u-xl-five-sixths { width: 83.33333%; }
  .u-xl-five-sevenths { width: 71.42857%; }
  .u-xl-five-eighths { width: 62.5%; }
  .u-xl-five-ninths { width: 55.55556%; }
  .u-xl-five-tenths { width: 50%; }
  .u-xl-five-elevenths { width: 45.45455%; }
  .u-xl-five-twelfths { width: 41.66667%; }
  .u-xl-six-sixths { width: 100%; }
  .u-xl-six-sevenths { width: 85.71429%; }
  .u-xl-six-eighths { width: 75%; }
  .u-xl-six-ninths { width: 66.66667%; }
  .u-xl-six-tenths { width: 60%; }
  .u-xl-six-elevenths { width: 54.54545%; }
  .u-xl-six-twelfths { width: 50%; }
  .u-xl-seven-sevenths { width: 100%; }
  .u-xl-seven-eighths { width: 87.5%; }
  .u-xl-seven-ninths { width: 77.77778%; }
  .u-xl-seven-tenths { width: 70%; }
  .u-xl-seven-elevenths { width: 63.63636%; }
  .u-xl-seven-twelfths { width: 58.33333%; }
  .u-xl-eight-eighths { width: 100%; }
  .u-xl-eight-ninths { width: 88.88889%; }
  .u-xl-eight-tenths { width: 80%; }
  .u-xl-eight-elevenths { width: 72.72727%; }
  .u-xl-eight-twelfths { width: 66.66667%; }
  .u-xl-nine-ninths { width: 100%; }
  .u-xl-nine-tenths { width: 90%; }
  .u-xl-nine-elevenths { width: 81.81818%; }
  .u-xl-nine-twelfths { width: 75%; }
  .u-xl-ten-tenths { width: 100%; }
  .u-xl-ten-elevenths { width: 90.90909%; }
  .u-xl-ten-twelfths { width: 83.33333%; }
  .u-xl-eleven-elevenths { width: 100%; }
  .u-xl-eleven-twelfths { width: 91.66667%; }
  .u-xl-twelve-twelfths { width: 100%; } }