Generated by SassMeister.com.

SassMeister-input.scss

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

// Set fix-mqs to the em width media queries should output at
$fix-mqs:false;

// Set map of breakpoints
$breakpoints: (
	'small': 25em,
	'medium': 35em,
	'large': 62.5em
);


$class-type:unquote(".");

// Breakpoints media query modified from Jake Archibald's Sass IE post: http://jakearchibald.github.io/sass-ie/
@mixin breakpoint($point) {
	// Get the width of the query based on the passed $point variable
	$width: map-get($breakpoints, $point);

	// If we're outputting for a fixed media query set...
	@if $fix-mqs {
		// ...and if we should apply these rules...
		@if $fix-mqs >= $width {
			// ...output the content the user gave us.
			@content;
		}
	}
	@else {
		// Otherwise, output it using a regular media query
		@media screen and (min-width: $width) {
			@content;
		}
	}
}

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

	@each $breakpoint in $breakpoints{
		$name: nth($breakpoint, 1);
		$width: nth($breakpoint, 2);

		@if $media-query == $name and $width{
			$breakpoint-found: true;

			// Use the breakpoint mixin with IE fallback here
			// Prevents repetition
			@include breakpoint($name) {
				@content;
			}
		}
	}

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

@function grid-unit($size) {
  @return percentage(1/$size);
}

$grid: (
  'whole',
  'half',
  'third',
  'quarter',
  'fifth',
  'sixth',
  'seventh',
  'eighth',
  'ninth',
  'tenth'
  // 'twelth' // edge case (value not the same as index...)
);

$numbers: 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven';
@mixin device-type($key) {
  
  @for $i from 1 through length($grid) {
    $width: nth($grid, $i);
    $grid-length:$i;
    $es:'';
    
    @if( $i>1 ) {
      $grid-length:$i - 1;  
    }
    
    @for $j from 1 through $grid-length  {
      $num:nth($numbers, $j);
      $unit:grid-unit($i);
      
      @if( $j>1 ) {
        $es:'s';
      }
      
      #{$class-type}#{$key}#{$num}-#{$width}#{$es} { width:$unit*$j; }
    }
   }
}
// Loop through breakpoints to output grid classes
@each $key, $size in $breakpoints {
	@include grid-media-query($key) {
	   @include device-type('#{$key}--');
	}
}

SassMeister-output.css

@media screen and (min-width: 25em) {
  .small--one-whole {
    width: 100%;
  }

  .small--one-half {
    width: 50%;
  }

  .small--one-third {
    width: 33.33333%;
  }

  .small--two-thirds {
    width: 66.66667%;
  }

  .small--one-quarter {
    width: 25%;
  }

  .small--two-quarters {
    width: 50%;
  }

  .small--three-quarters {
    width: 75%;
  }

  .small--one-fifth {
    width: 20%;
  }

  .small--two-fifths {
    width: 40%;
  }

  .small--three-fifths {
    width: 60%;
  }

  .small--four-fifths {
    width: 80%;
  }

  .small--one-sixth {
    width: 16.66667%;
  }

  .small--two-sixths {
    width: 33.33333%;
  }

  .small--three-sixths {
    width: 50.0%;
  }

  .small--four-sixths {
    width: 66.66667%;
  }

  .small--five-sixths {
    width: 83.33333%;
  }

  .small--one-seventh {
    width: 14.28571%;
  }

  .small--two-sevenths {
    width: 28.57143%;
  }

  .small--three-sevenths {
    width: 42.85714%;
  }

  .small--four-sevenths {
    width: 57.14286%;
  }

  .small--five-sevenths {
    width: 71.42857%;
  }

  .small--six-sevenths {
    width: 85.71429%;
  }

  .small--one-eighth {
    width: 12.5%;
  }

  .small--two-eighths {
    width: 25%;
  }

  .small--three-eighths {
    width: 37.5%;
  }

  .small--four-eighths {
    width: 50%;
  }

  .small--five-eighths {
    width: 62.5%;
  }

  .small--six-eighths {
    width: 75%;
  }

  .small--seven-eighths {
    width: 87.5%;
  }

  .small--one-ninth {
    width: 11.11111%;
  }

  .small--two-ninths {
    width: 22.22222%;
  }

  .small--three-ninths {
    width: 33.33333%;
  }

  .small--four-ninths {
    width: 44.44444%;
  }

  .small--five-ninths {
    width: 55.55556%;
  }

  .small--six-ninths {
    width: 66.66667%;
  }

  .small--seven-ninths {
    width: 77.77778%;
  }

  .small--eight-ninths {
    width: 88.88889%;
  }

  .small--one-tenth {
    width: 10%;
  }

  .small--two-tenths {
    width: 20%;
  }

  .small--three-tenths {
    width: 30%;
  }

  .small--four-tenths {
    width: 40%;
  }

  .small--five-tenths {
    width: 50%;
  }

  .small--six-tenths {
    width: 60%;
  }

  .small--seven-tenths {
    width: 70%;
  }

  .small--eight-tenths {
    width: 80%;
  }

  .small--nine-tenths {
    width: 90%;
  }
}
@media screen and (min-width: 35em) {
  .medium--one-whole {
    width: 100%;
  }

  .medium--one-half {
    width: 50%;
  }

  .medium--one-third {
    width: 33.33333%;
  }

  .medium--two-thirds {
    width: 66.66667%;
  }

  .medium--one-quarter {
    width: 25%;
  }

  .medium--two-quarters {
    width: 50%;
  }

  .medium--three-quarters {
    width: 75%;
  }

  .medium--one-fifth {
    width: 20%;
  }

  .medium--two-fifths {
    width: 40%;
  }

  .medium--three-fifths {
    width: 60%;
  }

  .medium--four-fifths {
    width: 80%;
  }

  .medium--one-sixth {
    width: 16.66667%;
  }

  .medium--two-sixths {
    width: 33.33333%;
  }

  .medium--three-sixths {
    width: 50.0%;
  }

  .medium--four-sixths {
    width: 66.66667%;
  }

  .medium--five-sixths {
    width: 83.33333%;
  }

  .medium--one-seventh {
    width: 14.28571%;
  }

  .medium--two-sevenths {
    width: 28.57143%;
  }

  .medium--three-sevenths {
    width: 42.85714%;
  }

  .medium--four-sevenths {
    width: 57.14286%;
  }

  .medium--five-sevenths {
    width: 71.42857%;
  }

  .medium--six-sevenths {
    width: 85.71429%;
  }

  .medium--one-eighth {
    width: 12.5%;
  }

  .medium--two-eighths {
    width: 25%;
  }

  .medium--three-eighths {
    width: 37.5%;
  }

  .medium--four-eighths {
    width: 50%;
  }

  .medium--five-eighths {
    width: 62.5%;
  }

  .medium--six-eighths {
    width: 75%;
  }

  .medium--seven-eighths {
    width: 87.5%;
  }

  .medium--one-ninth {
    width: 11.11111%;
  }

  .medium--two-ninths {
    width: 22.22222%;
  }

  .medium--three-ninths {
    width: 33.33333%;
  }

  .medium--four-ninths {
    width: 44.44444%;
  }

  .medium--five-ninths {
    width: 55.55556%;
  }

  .medium--six-ninths {
    width: 66.66667%;
  }

  .medium--seven-ninths {
    width: 77.77778%;
  }

  .medium--eight-ninths {
    width: 88.88889%;
  }

  .medium--one-tenth {
    width: 10%;
  }

  .medium--two-tenths {
    width: 20%;
  }

  .medium--three-tenths {
    width: 30%;
  }

  .medium--four-tenths {
    width: 40%;
  }

  .medium--five-tenths {
    width: 50%;
  }

  .medium--six-tenths {
    width: 60%;
  }

  .medium--seven-tenths {
    width: 70%;
  }

  .medium--eight-tenths {
    width: 80%;
  }

  .medium--nine-tenths {
    width: 90%;
  }
}
@media screen and (min-width: 62.5em) {
  .large--one-whole {
    width: 100%;
  }

  .large--one-half {
    width: 50%;
  }

  .large--one-third {
    width: 33.33333%;
  }

  .large--two-thirds {
    width: 66.66667%;
  }

  .large--one-quarter {
    width: 25%;
  }

  .large--two-quarters {
    width: 50%;
  }

  .large--three-quarters {
    width: 75%;
  }

  .large--one-fifth {
    width: 20%;
  }

  .large--two-fifths {
    width: 40%;
  }

  .large--three-fifths {
    width: 60%;
  }

  .large--four-fifths {
    width: 80%;
  }

  .large--one-sixth {
    width: 16.66667%;
  }

  .large--two-sixths {
    width: 33.33333%;
  }

  .large--three-sixths {
    width: 50.0%;
  }

  .large--four-sixths {
    width: 66.66667%;
  }

  .large--five-sixths {
    width: 83.33333%;
  }

  .large--one-seventh {
    width: 14.28571%;
  }

  .large--two-sevenths {
    width: 28.57143%;
  }

  .large--three-sevenths {
    width: 42.85714%;
  }

  .large--four-sevenths {
    width: 57.14286%;
  }

  .large--five-sevenths {
    width: 71.42857%;
  }

  .large--six-sevenths {
    width: 85.71429%;
  }

  .large--one-eighth {
    width: 12.5%;
  }

  .large--two-eighths {
    width: 25%;
  }

  .large--three-eighths {
    width: 37.5%;
  }

  .large--four-eighths {
    width: 50%;
  }

  .large--five-eighths {
    width: 62.5%;
  }

  .large--six-eighths {
    width: 75%;
  }

  .large--seven-eighths {
    width: 87.5%;
  }

  .large--one-ninth {
    width: 11.11111%;
  }

  .large--two-ninths {
    width: 22.22222%;
  }

  .large--three-ninths {
    width: 33.33333%;
  }

  .large--four-ninths {
    width: 44.44444%;
  }

  .large--five-ninths {
    width: 55.55556%;
  }

  .large--six-ninths {
    width: 66.66667%;
  }

  .large--seven-ninths {
    width: 77.77778%;
  }

  .large--eight-ninths {
    width: 88.88889%;
  }

  .large--one-tenth {
    width: 10%;
  }

  .large--two-tenths {
    width: 20%;
  }

  .large--three-tenths {
    width: 30%;
  }

  .large--four-tenths {
    width: 40%;
  }

  .large--five-tenths {
    width: 50%;
  }

  .large--six-tenths {
    width: 60%;
  }

  .large--seven-tenths {
    width: 70%;
  }

  .large--eight-tenths {
    width: 80%;
  }

  .large--nine-tenths {
    width: 90%;
  }
}