Skip to content

Instantly share code, notes, and snippets.

@kaelig

kaelig/SassMeister-input.scss

Last active August 29, 2015 14:11
Show Gist options
  • Save kaelig/ca96988bf25f6d0e88e2 to your computer and use it in GitHub Desktop.
Save kaelig/ca96988bf25f6d0e88e2 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
// sass-mq: https://github.com/kaelig/sass-mq
$mq-base-font-size: 16px !default;$mq-responsive: true !default;$mq-breakpoints: (mobile:320px,tablet:740px,desktop: 980px,wide:1300px) !default;$mq-static-breakpoint: desktop !default;$mq-show-breakpoints: () !default;$mq-media-type: all !default;@function mq-px2em($px, $base-font-size: $mq-base-font-size) {@if (unitless($px)) {@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels";@return mq-px2em($px + 0px);} @else if (unit($px) == em) {@return $px;}@return ($px / $base-font-size) * 1em;}@function mq-get-breakpoint-width($name) {@if(map-has-key($mq-breakpoints, $name)) {@return map-get($mq-breakpoints, $name);} @else {@warn "Breakpoint #{$name} wasn't found in $mq-breakpoints.";}}@mixin mq($from: false, $until: false, $and: false) {$min-width: 0;$max-width: 0;$media-query: '';@if $from {@if type-of($from) == number {$min-width: mq-px2em($from);} @else {$min-width: mq-px2em(mq-get-breakpoint-width($from));}}@if $until {@if type-of($until) == number {$max-width: mq-px2em($until);} @else {$max-width: mq-px2em(mq-get-breakpoint-width($until)) - .01em;}}@if ($mq-responsive == false) {$static-breakpoint-width: mq-get-breakpoint-width($mq-static-breakpoint);@if type-of($static-breakpoint-width) == number {$target-width: mq-px2em($static-breakpoint-width);@if ($and == false and ($min-width <= $target-width) and (($until == false) or ($max-width >= $target-width))) {@content;}} @else {@warn "No static styles will be output: #{$static-breakpoint-width}";}}@else {@if $min-width != 0 { $media-query: '#{$media-query} and (min-width: #{$min-width})'; }@if $max-width != 0 { $media-query: '#{$media-query} and (max-width: #{$max-width})'; }@if $and{ $media-query: '#{$media-query} and #{$and}'; }$media-query: unquote(#{$media-query});@media #{$mq-media-type + $media-query} {@content;}}}@mixin mq-add-breakpoint($name, $width) {$new-breakpoint: ($name: $width);$mq-breakpoints: map-merge($mq-breakpoints, $new-breakpoint) !global;}@if (length($mq-show-breakpoints) > 0) {body:before {background-color: #FCF8E3;border-bottom: 1px solid #FBEED5;border-left: 1px solid #FBEED5;color: #C09853;font: small-caption;padding: 3px 6px;position: fixed;right: 0;top: 0;z-index: 100;@each $show-breakpoint in $mq-show-breakpoints {$width: mq-get-breakpoint-width($show-breakpoint);@include mq($show-breakpoint) {content: "#{$show-breakpoint} ≥ #{$width} (#{mq-px2em($width)})";}}}}
$o-grid-gutter: 10px !default;
// Code starts here
$o-grid-layouts: (
'S': 600px,
'M': 800px,
'L': 1100px,
'XL': 1360px
) !default;
$o-grid-layout-names: map-keys($o-grid-layouts);
$o-grid-ie8-layout: 'L';
$mq-breakpoints: $o-grid-layouts;
@function oGridGetMaxWidthForLayout($size) {
@return map-get($o-grid-layouts, $size);
}
@function oGridColumnWidth($colspan, $total-cols) {
@return 100% / $total-cols * $colspan;
}
@mixin oGridRespondTo($layout-names) {
@each $current-layout in $layout-names {
@if map-has-key($o-grid-layouts, $current-layout) {
$index: index($o-grid-layout-names, $current-layout);
$from: false;
// Layout ends at its own max-width
// e.g. L: 1100px will span up to 1100px (-1px)
$until: $current-layout;
// Layout starts from the previous layout's max-width
@if $index > 1 {
$previous-layout: nth($o-grid-layout-names, $index - 1);
$from: $previous-layout;
}
// And if this is the last (and largest) layout…
$is-largest-layout: $index == length($o-grid-layouts);
@if $is-largest-layout {
$until: false;
}
@include mq($from, $until) {
@content;
}
} @else {
@warn "Layout '#{$current-layout}' doesn't exist and must be one of $o-grid-layouts";
}
}
}
@mixin oGridIE8Only {
@media \0screen {
@content;
}
}
@mixin oGridModernBrowsersOnly {
// Hides from all older browsers
// that don't implement @media queries properly
@media only screen {
@content;
}
}
@mixin oGridColumnBase {
float: left;
box-sizing: border-box;
padding-left: $o-grid-gutter / 2;
padding-right: $o-grid-gutter / 2;
}
.o-grid-row {
clear: both;
margin-left: auto;
margin-right: auto;
// Older browsers get a fixed-width layout
//
max-width: oGridGetMaxWidthForLayout('L');
// Clearfix
*zoom: 1;
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
// Nested rows
.o-grid-row {
margin-left: -$o-grid-gutter / 2;
margin-right: -$o-grid-gutter / 2;
}
}
/// Layout for modern browsers and IE 8
@mixin oGridModernLayout {
.o-grid-row {
// Set the maximum width to the largest layout available (the last of the )
$largest-layout: nth($o-grid-layout-names, -1);
max-width: oGridGetMaxWidthForLayout($largest-layout);
}
[data-o-grid-colspan] {
@include oGridColumnBase;
}
@for $colspan from 1 through 12 {
[data-o-grid-colspan~="#{$colspan}"] {
width: oGridColumnWidth($colspan, 12);
}
}
}
@mixin oGridStylesForLayout($layout) {
[data-o-grid-colspan~="#{$layout}hide"],
[data-o-grid-colspan~="#{$layout}0"] {
display: none;
}
@for $colspan from 1 through 12 {
[data-o-grid-colspan~="#{$layout}#{$colspan}"] {
width: oGridColumnWidth($colspan, 12);
}
}
[data-o-grid-colspan~="#{$layout}full-width"] {
width: oGridColumnWidth(12, 12);
}
[data-o-grid-colspan~="#{$layout}one-half"],
[data-o-grid-colspan~="#{$layout}two-quarters"] {
width: oGridColumnWidth(12/2, 12);
}
[data-o-grid-colspan~="#{$layout}one-third"] {
width: oGridColumnWidth(12/3, 12);
}
[data-o-grid-colspan~="#{$layout}two-thirds"] {
width: oGridColumnWidth(12/3*2, 12);
}
[data-o-grid-colspan~="#{$layout}one-quarter"] {
width: oGridColumnWidth(12/4, 12);
}
[data-o-grid-colspan~="#{$layout}three-quarters"] {
width: oGridColumnWidth(12/4*3, 12);
}
// Gutters
.o-grid-remove-gutters-#{$layout},
.o-grid-remove-gutters--left-#{$layout} {
padding-left: 0;
.o-grid-row {
margin-left: 0;
}
}
.o-grid-remove-gutters-#{$layout},
.o-grid-remove-gutters--right-#{$layout} {
padding-right: 0;
.o-grid-row {
margin-right: 0;
}
}
}
@include oGridIE8Only {
@include oGridModernLayout;
}
@include oGridModernBrowsersOnly {
@include oGridModernLayout;
}
// Gutters
.o-grid-remove-gutters,
.o-grid-remove-gutters--left {
padding-left: 0;
.o-grid-row {
margin-left: 0;
}
}
.o-grid-remove-gutters,
.o-grid-remove-gutters--right {
padding-right: 0;
.o-grid-row {
margin-right: 0;
}
}
@include oGridIE8Only {
@include oGridStylesForLayout($o-grid-ie8-layout);
}
@each $layout in $o-grid-layout-names {
@include oGridRespondTo($layout) {
@include oGridStylesForLayout($layout);
}
}
Raw
SassMeister-output.css
.o-grid-row { clear: both; margin-left: auto; margin-right: auto; max-width: 1100px; *zoom: 1; }
.o-grid-row:before, .o-grid-row:after { content: " "; display: table; }
.o-grid-row:after { clear: both; }
.o-grid-row .o-grid-row { margin-left: -5px; margin-right: -5px; }
@media \0screen { .o-grid-row { max-width: 1360px; }
[data-o-grid-colspan] { float: left; box-sizing: border-box; padding-left: 5px; padding-right: 5px; }
[data-o-grid-colspan~="1"] { width: 8.33333%; }
[data-o-grid-colspan~="2"] { width: 16.66667%; }
[data-o-grid-colspan~="3"] { width: 25%; }
[data-o-grid-colspan~="4"] { width: 33.33333%; }
[data-o-grid-colspan~="5"] { width: 41.66667%; }
[data-o-grid-colspan~="6"] { width: 50%; }
[data-o-grid-colspan~="7"] { width: 58.33333%; }
[data-o-grid-colspan~="8"] { width: 66.66667%; }
[data-o-grid-colspan~="9"] { width: 75%; }
[data-o-grid-colspan~="10"] { width: 83.33333%; }
[data-o-grid-colspan~="11"] { width: 91.66667%; }
[data-o-grid-colspan~="12"] { width: 100%; } }
@media only screen { .o-grid-row { max-width: 1360px; }
[data-o-grid-colspan] { float: left; box-sizing: border-box; padding-left: 5px; padding-right: 5px; }
[data-o-grid-colspan~="1"] { width: 8.33333%; }
[data-o-grid-colspan~="2"] { width: 16.66667%; }
[data-o-grid-colspan~="3"] { width: 25%; }
[data-o-grid-colspan~="4"] { width: 33.33333%; }
[data-o-grid-colspan~="5"] { width: 41.66667%; }
[data-o-grid-colspan~="6"] { width: 50%; }
[data-o-grid-colspan~="7"] { width: 58.33333%; }
[data-o-grid-colspan~="8"] { width: 66.66667%; }
[data-o-grid-colspan~="9"] { width: 75%; }
[data-o-grid-colspan~="10"] { width: 83.33333%; }
[data-o-grid-colspan~="11"] { width: 91.66667%; }
[data-o-grid-colspan~="12"] { width: 100%; } }
.o-grid-remove-gutters, .o-grid-remove-gutters--left { padding-left: 0; }
.o-grid-remove-gutters .o-grid-row, .o-grid-remove-gutters--left .o-grid-row { margin-left: 0; }
.o-grid-remove-gutters, .o-grid-remove-gutters--right { padding-right: 0; }
.o-grid-remove-gutters .o-grid-row, .o-grid-remove-gutters--right .o-grid-row { margin-right: 0; }
@media \0screen { [data-o-grid-colspan~="Lhide"], [data-o-grid-colspan~="L0"] { display: none; }
[data-o-grid-colspan~="L1"] { width: 8.33333%; }
[data-o-grid-colspan~="L2"] { width: 16.66667%; }
[data-o-grid-colspan~="L3"] { width: 25%; }
[data-o-grid-colspan~="L4"] { width: 33.33333%; }
[data-o-grid-colspan~="L5"] { width: 41.66667%; }
[data-o-grid-colspan~="L6"] { width: 50%; }
[data-o-grid-colspan~="L7"] { width: 58.33333%; }
[data-o-grid-colspan~="L8"] { width: 66.66667%; }
[data-o-grid-colspan~="L9"] { width: 75%; }
[data-o-grid-colspan~="L10"] { width: 83.33333%; }
[data-o-grid-colspan~="L11"] { width: 91.66667%; }
[data-o-grid-colspan~="L12"] { width: 100%; }
[data-o-grid-colspan~="Lfull-width"] { width: 100%; }
[data-o-grid-colspan~="Lone-half"], [data-o-grid-colspan~="Ltwo-quarters"] { width: 50%; }
[data-o-grid-colspan~="Lone-third"] { width: 33.33333%; }
[data-o-grid-colspan~="Ltwo-thirds"] { width: 66.66667%; }
[data-o-grid-colspan~="Lone-quarter"] { width: 25%; }
[data-o-grid-colspan~="Lthree-quarters"] { width: 75%; }
.o-grid-remove-gutters-L, .o-grid-remove-gutters--left-L { padding-left: 0; }
.o-grid-remove-gutters-L .o-grid-row, .o-grid-remove-gutters--left-L .o-grid-row { margin-left: 0; }
.o-grid-remove-gutters-L, .o-grid-remove-gutters--right-L { padding-right: 0; }
.o-grid-remove-gutters-L .o-grid-row, .o-grid-remove-gutters--right-L .o-grid-row { margin-right: 0; } }
@media all and (max-width: 37.49em) { [data-o-grid-colspan~="Shide"], [data-o-grid-colspan~="S0"] { display: none; }
[data-o-grid-colspan~="S1"] { width: 8.33333%; }
[data-o-grid-colspan~="S2"] { width: 16.66667%; }
[data-o-grid-colspan~="S3"] { width: 25%; }
[data-o-grid-colspan~="S4"] { width: 33.33333%; }
[data-o-grid-colspan~="S5"] { width: 41.66667%; }
[data-o-grid-colspan~="S6"] { width: 50%; }
[data-o-grid-colspan~="S7"] { width: 58.33333%; }
[data-o-grid-colspan~="S8"] { width: 66.66667%; }
[data-o-grid-colspan~="S9"] { width: 75%; }
[data-o-grid-colspan~="S10"] { width: 83.33333%; }
[data-o-grid-colspan~="S11"] { width: 91.66667%; }
[data-o-grid-colspan~="S12"] { width: 100%; }
[data-o-grid-colspan~="Sfull-width"] { width: 100%; }
[data-o-grid-colspan~="Sone-half"], [data-o-grid-colspan~="Stwo-quarters"] { width: 50%; }
[data-o-grid-colspan~="Sone-third"] { width: 33.33333%; }
[data-o-grid-colspan~="Stwo-thirds"] { width: 66.66667%; }
[data-o-grid-colspan~="Sone-quarter"] { width: 25%; }
[data-o-grid-colspan~="Sthree-quarters"] { width: 75%; }
.o-grid-remove-gutters-S, .o-grid-remove-gutters--left-S { padding-left: 0; }
.o-grid-remove-gutters-S .o-grid-row, .o-grid-remove-gutters--left-S .o-grid-row { margin-left: 0; }
.o-grid-remove-gutters-S, .o-grid-remove-gutters--right-S { padding-right: 0; }
.o-grid-remove-gutters-S .o-grid-row, .o-grid-remove-gutters--right-S .o-grid-row { margin-right: 0; } }
@media all and (min-width: 37.5em) and (max-width: 49.99em) { [data-o-grid-colspan~="Mhide"], [data-o-grid-colspan~="M0"] { display: none; }
[data-o-grid-colspan~="M1"] { width: 8.33333%; }
[data-o-grid-colspan~="M2"] { width: 16.66667%; }
[data-o-grid-colspan~="M3"] { width: 25%; }
[data-o-grid-colspan~="M4"] { width: 33.33333%; }
[data-o-grid-colspan~="M5"] { width: 41.66667%; }
[data-o-grid-colspan~="M6"] { width: 50%; }
[data-o-grid-colspan~="M7"] { width: 58.33333%; }
[data-o-grid-colspan~="M8"] { width: 66.66667%; }
[data-o-grid-colspan~="M9"] { width: 75%; }
[data-o-grid-colspan~="M10"] { width: 83.33333%; }
[data-o-grid-colspan~="M11"] { width: 91.66667%; }
[data-o-grid-colspan~="M12"] { width: 100%; }
[data-o-grid-colspan~="Mfull-width"] { width: 100%; }
[data-o-grid-colspan~="Mone-half"], [data-o-grid-colspan~="Mtwo-quarters"] { width: 50%; }
[data-o-grid-colspan~="Mone-third"] { width: 33.33333%; }
[data-o-grid-colspan~="Mtwo-thirds"] { width: 66.66667%; }
[data-o-grid-colspan~="Mone-quarter"] { width: 25%; }
[data-o-grid-colspan~="Mthree-quarters"] { width: 75%; }
.o-grid-remove-gutters-M, .o-grid-remove-gutters--left-M { padding-left: 0; }
.o-grid-remove-gutters-M .o-grid-row, .o-grid-remove-gutters--left-M .o-grid-row { margin-left: 0; }
.o-grid-remove-gutters-M, .o-grid-remove-gutters--right-M { padding-right: 0; }
.o-grid-remove-gutters-M .o-grid-row, .o-grid-remove-gutters--right-M .o-grid-row { margin-right: 0; } }
@media all and (min-width: 50em) and (max-width: 68.74em) { [data-o-grid-colspan~="Lhide"], [data-o-grid-colspan~="L0"] { display: none; }
[data-o-grid-colspan~="L1"] { width: 8.33333%; }
[data-o-grid-colspan~="L2"] { width: 16.66667%; }
[data-o-grid-colspan~="L3"] { width: 25%; }
[data-o-grid-colspan~="L4"] { width: 33.33333%; }
[data-o-grid-colspan~="L5"] { width: 41.66667%; }
[data-o-grid-colspan~="L6"] { width: 50%; }
[data-o-grid-colspan~="L7"] { width: 58.33333%; }
[data-o-grid-colspan~="L8"] { width: 66.66667%; }
[data-o-grid-colspan~="L9"] { width: 75%; }
[data-o-grid-colspan~="L10"] { width: 83.33333%; }
[data-o-grid-colspan~="L11"] { width: 91.66667%; }
[data-o-grid-colspan~="L12"] { width: 100%; }
[data-o-grid-colspan~="Lfull-width"] { width: 100%; }
[data-o-grid-colspan~="Lone-half"], [data-o-grid-colspan~="Ltwo-quarters"] { width: 50%; }
[data-o-grid-colspan~="Lone-third"] { width: 33.33333%; }
[data-o-grid-colspan~="Ltwo-thirds"] { width: 66.66667%; }
[data-o-grid-colspan~="Lone-quarter"] { width: 25%; }
[data-o-grid-colspan~="Lthree-quarters"] { width: 75%; }
.o-grid-remove-gutters-L, .o-grid-remove-gutters--left-L { padding-left: 0; }
.o-grid-remove-gutters-L .o-grid-row, .o-grid-remove-gutters--left-L .o-grid-row { margin-left: 0; }
.o-grid-remove-gutters-L, .o-grid-remove-gutters--right-L { padding-right: 0; }
.o-grid-remove-gutters-L .o-grid-row, .o-grid-remove-gutters--right-L .o-grid-row { margin-right: 0; } }
@media all and (min-width: 68.75em) { [data-o-grid-colspan~="XLhide"], [data-o-grid-colspan~="XL0"] { display: none; }
[data-o-grid-colspan~="XL1"] { width: 8.33333%; }
[data-o-grid-colspan~="XL2"] { width: 16.66667%; }
[data-o-grid-colspan~="XL3"] { width: 25%; }
[data-o-grid-colspan~="XL4"] { width: 33.33333%; }
[data-o-grid-colspan~="XL5"] { width: 41.66667%; }
[data-o-grid-colspan~="XL6"] { width: 50%; }
[data-o-grid-colspan~="XL7"] { width: 58.33333%; }
[data-o-grid-colspan~="XL8"] { width: 66.66667%; }
[data-o-grid-colspan~="XL9"] { width: 75%; }
[data-o-grid-colspan~="XL10"] { width: 83.33333%; }
[data-o-grid-colspan~="XL11"] { width: 91.66667%; }
[data-o-grid-colspan~="XL12"] { width: 100%; }
[data-o-grid-colspan~="XLfull-width"] { width: 100%; }
[data-o-grid-colspan~="XLone-half"], [data-o-grid-colspan~="XLtwo-quarters"] { width: 50%; }
[data-o-grid-colspan~="XLone-third"] { width: 33.33333%; }
[data-o-grid-colspan~="XLtwo-thirds"] { width: 66.66667%; }
[data-o-grid-colspan~="XLone-quarter"] { width: 25%; }
[data-o-grid-colspan~="XLthree-quarters"] { width: 75%; }
.o-grid-remove-gutters-XL, .o-grid-remove-gutters--left-XL { padding-left: 0; }
.o-grid-remove-gutters-XL .o-grid-row, .o-grid-remove-gutters--left-XL .o-grid-row { margin-left: 0; }
.o-grid-remove-gutters-XL, .o-grid-remove-gutters--right-XL { padding-right: 0; }
.o-grid-remove-gutters-XL .o-grid-row, .o-grid-remove-gutters--right-XL .o-grid-row { margin-right: 0; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment