Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Generated by SassMeister.com.
// ----
// 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%; }
}
}
@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%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment