Skip to content

Instantly share code, notes, and snippets.

@athaeryn
Created June 10, 2014 05:48
Show Gist options
  • Save athaeryn/0a9b80751c1e23f798e5 to your computer and use it in GitHub Desktop.
Save athaeryn/0a9b80751c1e23f798e5 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
$grid-widths: (
1:
one-whole,
1/2:
one-half
two-quarters
three-sixths
four-eighths
five-tenths
six-twelfths,
1/3:
one-third
two-sixths
four-twelfths,
2/3:
two-thirds
four-sixths
eight-twelfths,
1/4:
one-quarter
two-eighths
three-twelfths,
3/4:
three-quarters
six-eighths
nine-twelfths,
1/5:
one-fifth
two-tenths,
2/5:
two-fifths
four-tenths,
3/5:
three-fifths
six-tenths,
4/5:
four-fifths
eight-tenths,
1/6:
one-sixth
two-twelfths,
5/6:
five-sixths
ten-twelfths,
// Eighths
1/8: one-eighth,
3/8: three-eighths,
5/8: five-eighths,
7/8: seven-eighths,
// Tenths
1/10: one-tenth,
3/10: three-tenths,
7/10: seven-tenths,
9/10: nine-tenths,
//Twelfths
1/12: one-twelfth,
5/12: five-twelfths,
7/12: seven-twelfths,
11/12: eleven-twelfths
);
@mixin grid-setup($namespace: "", $property: width) {
@each $fraction, $widths in $grid-widths {
$selectors: null;
$percent: 100% /(1 / $fraction);
@each $width in $widths {
$selectors: append(
$selectors,
unquote(".#{$namespace}#{$width}"),
"comma"
);
}
#{$selectors} { #{$property}: $percent; }
}
}
@include grid-setup();
.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.33333%;
}
.two-thirds, .four-sixths, .eight-twelfths {
width: 66.66667%;
}
.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.66667%;
}
.five-sixths, .ten-twelfths {
width: 83.33333%;
}
.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.33333%;
}
.five-twelfths {
width: 41.66667%;
}
.seven-twelfths {
width: 58.33333%;
}
.eleven-twelfths {
width: 91.66667%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment