Generated by SassMeister.com.

SassMeister-input.scss

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

$breakpoints: "25.5em" "32em" "43.5em" "52.5em" "60em";

@for $i from 1 through length($breakpoints) {
  $breakpoint: nth($breakpoints, $i);
    
  @media only screen and (min-width: #{$breakpoint}) {
      .g#{$i}-1of1 { width: 100%; }
      .g#{$i}-1of2 { width: 50%; }
      .g#{$i}-1of3 { width: 33.33333%; }
      .g#{$i}-2of3 { width: 66.66666%; }
      .g#{$i}-1of4 { width: 25%; }
      .g#{$i}-3of4 { width: 75%; }
      .g#{$i}-1of5 { width: 20%; }
      .g#{$i}-2of5 { width: 40%; }
      .g#{$i}-3of5 { width: 60%; }
      .g#{$i}-4of5 { width: 80%; }
      .g#{$i}-1of6 { width: 16.66666%; }
      .g#{$i}-4of6 { width: 66.66666%; }
    	.g#{$i}-5of6 { width: 83.33333%; }
	}
}      

SassMeister-output.css

@media only screen and (min-width: 25.5em) {
  .g1-1of1 {
    width: 100%;
  }

  .g1-1of2 {
    width: 50%;
  }

  .g1-1of3 {
    width: 33.33333%;
  }

  .g1-2of3 {
    width: 66.66666%;
  }

  .g1-1of4 {
    width: 25%;
  }

  .g1-3of4 {
    width: 75%;
  }

  .g1-1of5 {
    width: 20%;
  }

  .g1-2of5 {
    width: 40%;
  }

  .g1-3of5 {
    width: 60%;
  }

  .g1-4of5 {
    width: 80%;
  }

  .g1-1of6 {
    width: 16.66666%;
  }

  .g1-4of6 {
    width: 66.66666%;
  }

  .g1-5of6 {
    width: 83.33333%;
  }
}
@media only screen and (min-width: 32em) {
  .g2-1of1 {
    width: 100%;
  }

  .g2-1of2 {
    width: 50%;
  }

  .g2-1of3 {
    width: 33.33333%;
  }

  .g2-2of3 {
    width: 66.66666%;
  }

  .g2-1of4 {
    width: 25%;
  }

  .g2-3of4 {
    width: 75%;
  }

  .g2-1of5 {
    width: 20%;
  }

  .g2-2of5 {
    width: 40%;
  }

  .g2-3of5 {
    width: 60%;
  }

  .g2-4of5 {
    width: 80%;
  }

  .g2-1of6 {
    width: 16.66666%;
  }

  .g2-4of6 {
    width: 66.66666%;
  }

  .g2-5of6 {
    width: 83.33333%;
  }
}
@media only screen and (min-width: 43.5em) {
  .g3-1of1 {
    width: 100%;
  }

  .g3-1of2 {
    width: 50%;
  }

  .g3-1of3 {
    width: 33.33333%;
  }

  .g3-2of3 {
    width: 66.66666%;
  }

  .g3-1of4 {
    width: 25%;
  }

  .g3-3of4 {
    width: 75%;
  }

  .g3-1of5 {
    width: 20%;
  }

  .g3-2of5 {
    width: 40%;
  }

  .g3-3of5 {
    width: 60%;
  }

  .g3-4of5 {
    width: 80%;
  }

  .g3-1of6 {
    width: 16.66666%;
  }

  .g3-4of6 {
    width: 66.66666%;
  }

  .g3-5of6 {
    width: 83.33333%;
  }
}
@media only screen and (min-width: 52.5em) {
  .g4-1of1 {
    width: 100%;
  }

  .g4-1of2 {
    width: 50%;
  }

  .g4-1of3 {
    width: 33.33333%;
  }

  .g4-2of3 {
    width: 66.66666%;
  }

  .g4-1of4 {
    width: 25%;
  }

  .g4-3of4 {
    width: 75%;
  }

  .g4-1of5 {
    width: 20%;
  }

  .g4-2of5 {
    width: 40%;
  }

  .g4-3of5 {
    width: 60%;
  }

  .g4-4of5 {
    width: 80%;
  }

  .g4-1of6 {
    width: 16.66666%;
  }

  .g4-4of6 {
    width: 66.66666%;
  }

  .g4-5of6 {
    width: 83.33333%;
  }
}
@media only screen and (min-width: 60em) {
  .g5-1of1 {
    width: 100%;
  }

  .g5-1of2 {
    width: 50%;
  }

  .g5-1of3 {
    width: 33.33333%;
  }

  .g5-2of3 {
    width: 66.66666%;
  }

  .g5-1of4 {
    width: 25%;
  }

  .g5-3of4 {
    width: 75%;
  }

  .g5-1of5 {
    width: 20%;
  }

  .g5-2of5 {
    width: 40%;
  }

  .g5-3of5 {
    width: 60%;
  }

  .g5-4of5 {
    width: 80%;
  }

  .g5-1of6 {
    width: 16.66666%;
  }

  .g5-4of6 {
    width: 66.66666%;
  }

  .g5-5of6 {
    width: 83.33333%;
  }
}