Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

$responsive:            true !default;

$mobile-first:          true !default;

$gutter:                8px !default;

$use-silent-classes:    false !default;

$push:                  false !default;
$pull:                  false !default;

$breakpointKeys: 'g2' 'g3' 'g4';
$breakpointValues: '(min-width: 400px)' '(max-width: 600px)' '(min-width: 1008px)';

$breakpoint-has-widths: 'g2', 'g3', 'g4' !default;
$breakpoint-has-push:   'g2', 'g3', 'g4' !default;
$breakpoint-has-pull:   'g2', 'g3', 'g4' !default;

$class-type: if($use-silent-classes, unquote("%"), unquote("."));

@mixin grid-media-query($media-query) {
    $breakpoint-found: false;

    @for $i from 1 through length($breakpointKeys) {
      $name: nth($breakpointKeys, $i);
      $declaration: nth($breakpointValues, $i);
      @if $media-query == $name and $declaration {
          $breakpoint-found: true;

          @media only screen and #{$declaration} {
              @content;
          }
      }
    }

    @if not $breakpoint-found {
        @warn "Breakpoint ‘#{$media-query}’ does not exist";
    }
}

@mixin silent-relative {
    @if $use-silent-classes {
        position:relative;
    }
}

#{$class-type}grid {
    width:100%;
    list-style:none;
    margin:0;
    padding:0;
}

#{$class-type}grid__row {
  margin: 0 (-$gutter);
}

    #{$class-type}grid__item {
        @if $mobile-first {
            width:100%;
        }
        float:left;
        display:block;
        padding-left:$gutter;
        vertical-align:top;
        -webkit-box-sizing:border-box;
           -moz-box-sizing:border-box;
                box-sizing:border-box;
    }

#{$class-type}grid--rev {
    direction:rtl;
    text-align:left;

    > #{$class-type}grid__item {
        direction:ltr;
        text-align:left;
    }
}

@mixin device-type($namespace:"") {
    $prefix: $class-type + $namespace;

    #{$prefix}one-whole         { width:100%; }

    #{$prefix}one-half          { width:50%; }

    #{$prefix}one-third         { width:33.333%; }
    #{$prefix}two-thirds        { width:66.666%; }

    #{$prefix}one-quarter       { width:25%; }
    #{$prefix}two-quarters      { @extend #{$prefix}one-half; }
    #{$prefix}three-quarters    { width:75%; }

    #{$prefix}one-fifth         { width:20%; }
    #{$prefix}two-fifths        { width:40%; }
    #{$prefix}three-fifths      { width:60%; }
    #{$prefix}four-fifths       { width:80%; }

    #{$prefix}one-sixth         { width:16.666%; }
    #{$prefix}two-sixths        { @extend #{$prefix}one-third; }
    #{$prefix}three-sixths      { @extend #{$prefix}one-half; }
    #{$prefix}four-sixths       { @extend #{$prefix}two-thirds; }
    #{$prefix}five-sixths       { width:83.333%; }

    #{$prefix}one-eighth        { width:12.5%; }
    #{$prefix}two-eighths       { @extend #{$prefix}one-quarter; }
    #{$prefix}three-eighths     { width:37.5%; }
    #{$prefix}four-eighths      { @extend #{$prefix}one-half; }
    #{$prefix}five-eighths      { width:62.5%; }
    #{$prefix}six-eighths       { @extend #{$prefix}three-quarters; }
    #{$prefix}seven-eighths     { width:87.5%; }

    #{$prefix}one-tenth         { width:10%; }
    #{$prefix}two-tenths        { @extend #{$prefix}one-fifth; }
    #{$prefix}three-tenths      { width:30%; }
    #{$prefix}four-tenths       { @extend #{$prefix}two-fifths; }
    #{$prefix}five-tenths       { @extend #{$prefix}one-half; }
    #{$prefix}six-tenths        { @extend #{$prefix}three-fifths; }
    #{$prefix}seven-tenths      { width:70%; }
    #{$prefix}eight-tenths      { @extend #{$prefix}four-fifths; }
    #{$prefix}nine-tenths       { width:90%; }

    #{$prefix}one-twelfth       { width:8.333%; }
    #{$prefix}two-twelfths      { @extend #{$prefix}one-sixth; }
    #{$prefix}three-twelfths    { @extend #{$prefix}one-quarter; }
    #{$prefix}four-twelfths     { @extend #{$prefix}one-third; }
    #{$prefix}five-twelfths     { width:41.666% }
    #{$prefix}six-twelfths      { @extend #{$prefix}one-half; }
    #{$prefix}seven-twelfths    { width:58.333%; }
    #{$prefix}eight-twelfths    { @extend #{$prefix}two-thirds; }
    #{$prefix}nine-twelfths     { @extend #{$prefix}three-quarters; }
    #{$prefix}ten-twelfths      { @extend #{$prefix}five-sixths; }
    #{$prefix}eleven-twelfths   { width:91.666%; }
}

@include device-type;

@if $responsive {

    @each $name in $breakpoint-has-widths {
        @include grid-media-query($name) {
           @include device-type('#{$name}--');
        }
    }

}

@mixin push-setup($namespace: "") {
    $prefix: $class-type + "push--" + $namespace;

    #{$prefix}one-whole           { left:100%; @include silent-relative; }

    #{$prefix}one-half            { left:50%; @include silent-relative; }

    #{$prefix}one-third           { left:33.333%; @include silent-relative; }

    #{$prefix}one-quarter         { left:25%; @include silent-relative; }
    #{$prefix}two-quarters        { @extend #{$prefix}one-half; }
    #{$prefix}three-quarters      { left:75%; @include silent-relative; }

    #{$prefix}one-fifth           { left:20%; @include silent-relative; }
    #{$prefix}two-fifths          { left:40%; @include silent-relative; }
    #{$prefix}three-fifths        { left:60%; @include silent-relative; }
    #{$prefix}four-fifths         { left:80%; @include silent-relative; }

    #{$prefix}one-sixth           { left:16.666%; @include silent-relative; }
    #{$prefix}two-sixths          { @extend #{$prefix}one-third; }
    #{$prefix}three-sixths        { @extend #{$prefix}one-half; }
    #{$prefix}four-sixths         { @extend #{$prefix}two-thirds; }
    #{$prefix}five-sixths         { left:83.333%; @include silent-relative; }

    #{$prefix}one-eighth          { left:12.5%; @include silent-relative; }
    #{$prefix}two-eighths         { @extend #{$prefix}one-quarter; }
    #{$prefix}three-eighths       { left:37.5%; @include silent-relative; }
    #{$prefix}four-eighths        { @extend #{$prefix}one-half; }
    #{$prefix}five-eighths        { left:62.5%; @include silent-relative; }
    #{$prefix}six-eighths         { @extend #{$prefix}three-quarters; }
    #{$prefix}seven-eighths       { left:87.5%; @include silent-relative; }

    #{$prefix}one-tenth           { left:10%; @include silent-relative; }
    #{$prefix}two-tenths          { @extend #{$prefix}one-fifth; }
    #{$prefix}three-tenths        { left:30%; @include silent-relative; }
    #{$prefix}four-tenths         { @extend #{$prefix}two-fifths; }
    #{$prefix}five-tenths         { @extend #{$prefix}one-half; }
    #{$prefix}six-tenths          { @extend #{$prefix}three-fifths; }
    #{$prefix}seven-tenths        { left:70%; @include silent-relative; }
    #{$prefix}eight-tenths        { @extend #{$prefix}four-fifths; }
    #{$prefix}nine-tenths         { left:90%; @include silent-relative; }

    #{$prefix}one-twelfth         { left:8.333%; @include silent-relative; }
    #{$prefix}two-twelfths        { @extend #{$prefix}one-sixth; }
    #{$prefix}three-twelfths      { @extend #{$prefix}one-quarter; }
    #{$prefix}four-twelfths       { @extend #{$prefix}one-third; }
    #{$prefix}five-twelfths       { left:41.666%; @include silent-relative; }
    #{$prefix}six-twelfths        { @extend #{$prefix}one-half; }
    #{$prefix}seven-twelfths      { left:58.333%; @include silent-relative; }
    #{$prefix}eight-twelfths      { @extend #{$prefix}two-thirds; }
    #{$prefix}nine-twelfths       { @extend #{$prefix}three-quarters; }
    #{$prefix}ten-twelfths        { @extend #{$prefix}five-sixths; }
    #{$prefix}eleven-twelfths     { left:91.666%; @include silent-relative; }
}

@if $push {

    /**
     * Not a particularly great selector, but the DRYest way to do things.
     */
    [class*="push--"] { position:relative; }

    @include push-setup;

    @if $responsive {
        @each $name in $breakpoint-has-push {
            @include grid-media-query($name) {
                @include push-setup('#{$name}--');
            }
        }
    }

}

@mixin pull-setup($namespace: "") {
    $prefix: $class-type + "pull--" + $namespace;

    #{$prefix}one-whole           { right:100%; @include silent-relative; }

    #{$prefix}one-half            { right:50%; @include silent-relative; }

    #{$prefix}one-third           { right:33.333%; @include silent-relative; }
    #{$prefix}two-thirds          { right:66.666%; @include silent-relative; }

    #{$prefix}one-quarter         { right:25%; @include silent-relative; }
    #{$prefix}two-quarters        { @extend #{$prefix}one-half; }
    #{$prefix}three-quarters      { right:75%; @include silent-relative; }

    #{$prefix}one-fifth           { right:20%; @include silent-relative; }
    #{$prefix}two-fifths          { right:40%; @include silent-relative; }
    #{$prefix}three-fifths        { right:60%; @include silent-relative; }
    #{$prefix}four-fifths         { right:80%; @include silent-relative; }

    #{$prefix}one-sixth           { right:16.666%; @include silent-relative; }
    #{$prefix}two-sixths          { @extend #{$prefix}one-third; }
    #{$prefix}three-sixths        { @extend #{$prefix}one-half; }
    #{$prefix}four-sixths         { @extend #{$prefix}two-thirds; }
    #{$prefix}five-sixths         { right:83.333%; @include silent-relative; }

    #{$prefix}one-eighth          { right:12.5%; @include silent-relative; }
    #{$prefix}two-eighths         { @extend #{$prefix}one-quarter; }
    #{$prefix}three-eighths       { right:37.5%; @include silent-relative; }
    #{$prefix}four-eighths        { @extend #{$prefix}one-half; }
    #{$prefix}five-eighths        { right:62.5%; @include silent-relative; }
    #{$prefix}six-eighths         { @extend #{$prefix}three-quarters; }
    #{$prefix}seven-eighths       { right:87.5%; @include silent-relative; }

    #{$prefix}one-tenth           { right:10%; @include silent-relative; }
    #{$prefix}two-tenths          { @extend #{$prefix}one-fifth; }
    #{$prefix}three-tenths        { right:30%; @include silent-relative; }
    #{$prefix}four-tenths         { @extend #{$prefix}two-fifths; }
    #{$prefix}five-tenths         { @extend #{$prefix}one-half; }
    #{$prefix}six-tenths          { @extend #{$prefix}three-fifths; }
    #{$prefix}seven-tenths        { right:70%; @include silent-relative; }
    #{$prefix}eight-tenths        { @extend #{$prefix}four-fifths; }
    #{$prefix}nine-tenths         { right:90%; @include silent-relative; }

    #{$prefix}one-twelfth         { right:8.333%; @include silent-relative; }
    #{$prefix}two-twelfths        { @extend #{$prefix}one-sixth; }
    #{$prefix}three-twelfths      { @extend #{$prefix}one-quarter; }
    #{$prefix}four-twelfths       { @extend #{$prefix}one-third; }
    #{$prefix}five-twelfths       { right:41.666%; @include silent-relative; }
    #{$prefix}six-twelfths        { @extend #{$prefix}one-half; }
    #{$prefix}seven-twelfths      { right:58.333%; @include silent-relative; }
    #{$prefix}eight-twelfths      { @extend #{$prefix}two-thirds; }
    #{$prefix}nine-twelfths       { @extend #{$prefix}three-quarters; }
    #{$prefix}ten-twelfths        { @extend #{$prefix}five-sixths; }
    #{$prefix}eleven-twelfths     { right:91.666%; @include silent-relative; }
}

@if $pull {
    [class*="pull--"] { position:relative; }

    @include pull-setup;

    @if $responsive {
        @each $name in $breakpoint-has-pull {
            @include grid-media-query($name) {
                @include pull-setup('#{$name}--');
            }
        }
    }

}

SassMeister-output.css

.grid {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0; }

.grid__row {
  margin: 0 -8px; }

.grid__item {
  width: 100%;
  float: left;
  display: block;
  padding-left: 8px;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid--rev {
  direction: rtl;
  text-align: left; }
  .grid--rev > .grid__item {
    direction: ltr;
    text-align: left; }

.one-whole {
  width: 100%; }

.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
  width: 50%; }

.one-third, .two-sixths, .four-twelfths {
  width: 33.333%; }

.two-thirds, .four-sixths, .eight-twelfths {
  width: 66.666%; }

.one-quarter, .two-eighths, .three-twelfths {
  width: 25%; }

.three-quarters, .six-eighths, .nine-twelfths {
  width: 75%; }

.one-fifth, .two-tenths {
  width: 20%; }

.two-fifths, .four-tenths {
  width: 40%; }

.three-fifths, .six-tenths {
  width: 60%; }

.four-fifths, .eight-tenths {
  width: 80%; }

.one-sixth, .two-twelfths {
  width: 16.666%; }

.five-sixths, .ten-twelfths {
  width: 83.333%; }

.one-eighth {
  width: 12.5%; }

.three-eighths {
  width: 37.5%; }

.five-eighths {
  width: 62.5%; }

.seven-eighths {
  width: 87.5%; }

.one-tenth {
  width: 10%; }

.three-tenths {
  width: 30%; }

.seven-tenths {
  width: 70%; }

.nine-tenths {
  width: 90%; }

.one-twelfth {
  width: 8.333%; }

.five-twelfths {
  width: 41.666%; }

.seven-twelfths {
  width: 58.333%; }

.eleven-twelfths {
  width: 91.666%; }

@media only screen and (min-width: 400px) {
  .g2--one-whole {
    width: 100%; }
  .g2--one-half, .g2--two-quarters, .g2--three-sixths, .g2--four-eighths, .g2--five-tenths, .g2--six-twelfths {
    width: 50%; }
  .g2--one-third, .g2--two-sixths, .g2--four-twelfths {
    width: 33.333%; }
  .g2--two-thirds, .g2--four-sixths, .g2--eight-twelfths {
    width: 66.666%; }
  .g2--one-quarter, .g2--two-eighths, .g2--three-twelfths {
    width: 25%; }
  .g2--three-quarters, .g2--six-eighths, .g2--nine-twelfths {
    width: 75%; }
  .g2--one-fifth, .g2--two-tenths {
    width: 20%; }
  .g2--two-fifths, .g2--four-tenths {
    width: 40%; }
  .g2--three-fifths, .g2--six-tenths {
    width: 60%; }
  .g2--four-fifths, .g2--eight-tenths {
    width: 80%; }
  .g2--one-sixth, .g2--two-twelfths {
    width: 16.666%; }
  .g2--five-sixths, .g2--ten-twelfths {
    width: 83.333%; }
  .g2--one-eighth {
    width: 12.5%; }
  .g2--three-eighths {
    width: 37.5%; }
  .g2--five-eighths {
    width: 62.5%; }
  .g2--seven-eighths {
    width: 87.5%; }
  .g2--one-tenth {
    width: 10%; }
  .g2--three-tenths {
    width: 30%; }
  .g2--seven-tenths {
    width: 70%; }
  .g2--nine-tenths {
    width: 90%; }
  .g2--one-twelfth {
    width: 8.333%; }
  .g2--five-twelfths {
    width: 41.666%; }
  .g2--seven-twelfths {
    width: 58.333%; }
  .g2--eleven-twelfths {
    width: 91.666%; } }

@media only screen and (max-width: 600px) {
  .g3--one-whole {
    width: 100%; }
  .g3--one-half, .g3--two-quarters, .g3--three-sixths, .g3--four-eighths, .g3--five-tenths, .g3--six-twelfths {
    width: 50%; }
  .g3--one-third, .g3--two-sixths, .g3--four-twelfths {
    width: 33.333%; }
  .g3--two-thirds, .g3--four-sixths, .g3--eight-twelfths {
    width: 66.666%; }
  .g3--one-quarter, .g3--two-eighths, .g3--three-twelfths {
    width: 25%; }
  .g3--three-quarters, .g3--six-eighths, .g3--nine-twelfths {
    width: 75%; }
  .g3--one-fifth, .g3--two-tenths {
    width: 20%; }
  .g3--two-fifths, .g3--four-tenths {
    width: 40%; }
  .g3--three-fifths, .g3--six-tenths {
    width: 60%; }
  .g3--four-fifths, .g3--eight-tenths {
    width: 80%; }
  .g3--one-sixth, .g3--two-twelfths {
    width: 16.666%; }
  .g3--five-sixths, .g3--ten-twelfths {
    width: 83.333%; }
  .g3--one-eighth {
    width: 12.5%; }
  .g3--three-eighths {
    width: 37.5%; }
  .g3--five-eighths {
    width: 62.5%; }
  .g3--seven-eighths {
    width: 87.5%; }
  .g3--one-tenth {
    width: 10%; }
  .g3--three-tenths {
    width: 30%; }
  .g3--seven-tenths {
    width: 70%; }
  .g3--nine-tenths {
    width: 90%; }
  .g3--one-twelfth {
    width: 8.333%; }
  .g3--five-twelfths {
    width: 41.666%; }
  .g3--seven-twelfths {
    width: 58.333%; }
  .g3--eleven-twelfths {
    width: 91.666%; } }

@media only screen and (min-width: 1008px) {
  .g4--one-whole {
    width: 100%; }
  .g4--one-half, .g4--two-quarters, .g4--three-sixths, .g4--four-eighths, .g4--five-tenths, .g4--six-twelfths {
    width: 50%; }
  .g4--one-third, .g4--two-sixths, .g4--four-twelfths {
    width: 33.333%; }
  .g4--two-thirds, .g4--four-sixths, .g4--eight-twelfths {
    width: 66.666%; }
  .g4--one-quarter, .g4--two-eighths, .g4--three-twelfths {
    width: 25%; }
  .g4--three-quarters, .g4--six-eighths, .g4--nine-twelfths {
    width: 75%; }
  .g4--one-fifth, .g4--two-tenths {
    width: 20%; }
  .g4--two-fifths, .g4--four-tenths {
    width: 40%; }
  .g4--three-fifths, .g4--six-tenths {
    width: 60%; }
  .g4--four-fifths, .g4--eight-tenths {
    width: 80%; }
  .g4--one-sixth, .g4--two-twelfths {
    width: 16.666%; }
  .g4--five-sixths, .g4--ten-twelfths {
    width: 83.333%; }
  .g4--one-eighth {
    width: 12.5%; }
  .g4--three-eighths {
    width: 37.5%; }
  .g4--five-eighths {
    width: 62.5%; }
  .g4--seven-eighths {
    width: 87.5%; }
  .g4--one-tenth {
    width: 10%; }
  .g4--three-tenths {
    width: 30%; }
  .g4--seven-tenths {
    width: 70%; }
  .g4--nine-tenths {
    width: 90%; }
  .g4--one-twelfth {
    width: 8.333%; }
  .g4--five-twelfths {
    width: 41.666%; }
  .g4--seven-twelfths {
    width: 58.333%; }
  .g4--eleven-twelfths {
    width: 91.666%; } }