Skip to content

Instantly share code, notes, and snippets.

@mattjburrows

mattjburrows/SassMeister-input.scss

Created March 30, 2015 13:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mattjburrows/fd0573e0c1a7c3be6e2c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mattjburrows/fd0573e0c1a7c3be6e2c to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
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}--');
}
}
}
}
Raw
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%; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment