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/38781c7ab1cf759bcb0f to your computer and use it in GitHub Desktop.
Save kaelig/38781c7ab1cf759bcb0f to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// libsass (v3.0.2)
// ----
// 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-layout-sizes: (
S: 600px,
M: 800px,
L: 1100px,
XL: 1360px
) !default;
$o-grid-ie8-layout: L;
$mq-breakpoints: $_o-grid-layout-sizes;
@function oGridGetMaxWidthForLayout($size) {
@return map-get($_o-grid-layout-sizes, $size);
}
@function oGridColumnWidth($colspan, $total-cols) {
@return 100% / $total-cols * $colspan;
}
@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;
width: 100%;
margin-left: auto;
margin-right: auto;
// Older browsers get a fixed-width layout
max-width: oGridGetMaxWidthForLayout(L);
*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
max-width: oGridGetMaxWidthForLayout(nth(map-keys($_o-grid-layout-sizes), length($_o-grid-layout-sizes)));
}
[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 {
%#{$layout}-#{$colspan},
[data-o-grid-colspan~="#{$layout}#{$colspan}"] {
width: oGridColumnWidth($colspan, 12);
}
}
[data-o-grid-colspan~="#{$layout}full-width"] {
@extend [data-o-grid-colspan~="#{$layout}12"];
}
[data-o-grid-colspan~="#{$layout}one-half"],
[data-o-grid-colspan~="#{$layout}two-quarters"] {
@extend [data-o-grid-colspan~="#{$layout}6"];
}
[data-o-grid-colspan~="#{$layout}one-third"] {
@extend [data-o-grid-colspan~="#{$layout}4"];
}
[data-o-grid-colspan~="#{$layout}two-thirds"] {
@extend [data-o-grid-colspan~="#{$layout}8"];
}
[data-o-grid-colspan~="#{$layout}one-quarter"] {
@extend [data-o-grid-colspan~="#{$layout}3"];
}
[data-o-grid-colspan~="#{$layout}three-quarters"] {
@extend [data-o-grid-colspan~="#{$layout}9"];
}
// 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;
}
}
}
// Hide in IE < 8
@media \0screen {
@include oGridModernLayout;
@include oGridStylesForLayout($o-grid-ie8-layout);
}
// Browsers that support @media queries properly
@include mq(1px) {
@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;
}
}
@each $layout, $width in $_o-grid-layout-sizes {
$layout-names: map-keys($_o-grid-layout-sizes);
$index: index($layout-names, $layout);
$from: null;
$until: null;
// For the first layout, we want to apply the layout up to
@if $index == 1 {
$from: false;
$until: $layout;
}
// Last layout
@if $index == length($_o-grid-layout-sizes) {
$from: $layout;
$until: false;
}
@if $from == null {
// Fetch the previous layout name
$from: nth($layout-names, $index - 1);
}
@if $until == null {
$until: $layout;
}
/* From: #{$from} */
/* Current layout: #{$until} */
@include mq($from, $until) {
@include oGridStylesForLayout($layout);
}
}
Raw
SassMeister-output.css
.o-grid-row {
clear: both;
width: 100%;
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%; }
[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"], [data-o-grid-colspan~="Lone-quarter"] {
width: 25%; }
[data-o-grid-colspan~="L4"], [data-o-grid-colspan~="Lone-third"] {
width: 33.33333%; }
[data-o-grid-colspan~="L5"] {
width: 41.66667%; }
[data-o-grid-colspan~="L6"], [data-o-grid-colspan~="Lone-half"], [data-o-grid-colspan~="Ltwo-quarters"] {
width: 50%; }
[data-o-grid-colspan~="L7"] {
width: 58.33333%; }
[data-o-grid-colspan~="L8"], [data-o-grid-colspan~="Ltwo-thirds"] {
width: 66.66667%; }
[data-o-grid-colspan~="L9"], [data-o-grid-colspan~="Lthree-quarters"] {
width: 75%; }
[data-o-grid-colspan~="L10"] {
width: 83.33333%; }
[data-o-grid-colspan~="L11"] {
width: 91.66667%; }
[data-o-grid-colspan~="L12"], [data-o-grid-colspan~="Lfull-width"] {
width: 100%; }
.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: 0.0625em) {
.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; }
/* From: false */
/* Current layout: S */
@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"], [data-o-grid-colspan~="Sone-quarter"] {
width: 25%; }
[data-o-grid-colspan~="S4"], [data-o-grid-colspan~="Sone-third"] {
width: 33.33333%; }
[data-o-grid-colspan~="S5"] {
width: 41.66667%; }
[data-o-grid-colspan~="S6"], [data-o-grid-colspan~="Sone-half"], [data-o-grid-colspan~="Stwo-quarters"] {
width: 50%; }
[data-o-grid-colspan~="S7"] {
width: 58.33333%; }
[data-o-grid-colspan~="S8"], [data-o-grid-colspan~="Stwo-thirds"] {
width: 66.66667%; }
[data-o-grid-colspan~="S9"], [data-o-grid-colspan~="Sthree-quarters"] {
width: 75%; }
[data-o-grid-colspan~="S10"] {
width: 83.33333%; }
[data-o-grid-colspan~="S11"] {
width: 91.66667%; }
[data-o-grid-colspan~="S12"], [data-o-grid-colspan~="Sfull-width"] {
width: 100%; }
.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; }
}
/* From: S */
/* Current layout: M */
@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"], [data-o-grid-colspan~="Mone-quarter"] {
width: 25%; }
[data-o-grid-colspan~="M4"], [data-o-grid-colspan~="Mone-third"] {
width: 33.33333%; }
[data-o-grid-colspan~="M5"] {
width: 41.66667%; }
[data-o-grid-colspan~="M6"], [data-o-grid-colspan~="Mone-half"], [data-o-grid-colspan~="Mtwo-quarters"] {
width: 50%; }
[data-o-grid-colspan~="M7"] {
width: 58.33333%; }
[data-o-grid-colspan~="M8"], [data-o-grid-colspan~="Mtwo-thirds"] {
width: 66.66667%; }
[data-o-grid-colspan~="M9"], [data-o-grid-colspan~="Mthree-quarters"] {
width: 75%; }
[data-o-grid-colspan~="M10"] {
width: 83.33333%; }
[data-o-grid-colspan~="M11"] {
width: 91.66667%; }
[data-o-grid-colspan~="M12"], [data-o-grid-colspan~="Mfull-width"] {
width: 100%; }
.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; }
}
/* From: M */
/* Current layout: L */
@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"], [data-o-grid-colspan~="Lone-quarter"] {
width: 25%; }
[data-o-grid-colspan~="L4"], [data-o-grid-colspan~="Lone-third"] {
width: 33.33333%; }
[data-o-grid-colspan~="L5"] {
width: 41.66667%; }
[data-o-grid-colspan~="L6"], [data-o-grid-colspan~="Lone-half"], [data-o-grid-colspan~="Ltwo-quarters"] {
width: 50%; }
[data-o-grid-colspan~="L7"] {
width: 58.33333%; }
[data-o-grid-colspan~="L8"], [data-o-grid-colspan~="Ltwo-thirds"] {
width: 66.66667%; }
[data-o-grid-colspan~="L9"], [data-o-grid-colspan~="Lthree-quarters"] {
width: 75%; }
[data-o-grid-colspan~="L10"] {
width: 83.33333%; }
[data-o-grid-colspan~="L11"] {
width: 91.66667%; }
[data-o-grid-colspan~="L12"], [data-o-grid-colspan~="Lfull-width"] {
width: 100%; }
.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; }
}
/* From: XL */
/* Current layout: false */
@media all and (min-width: 85em) {
[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"], [data-o-grid-colspan~="XLone-quarter"] {
width: 25%; }
[data-o-grid-colspan~="XL4"], [data-o-grid-colspan~="XLone-third"] {
width: 33.33333%; }
[data-o-grid-colspan~="XL5"] {
width: 41.66667%; }
[data-o-grid-colspan~="XL6"], [data-o-grid-colspan~="XLone-half"], [data-o-grid-colspan~="XLtwo-quarters"] {
width: 50%; }
[data-o-grid-colspan~="XL7"] {
width: 58.33333%; }
[data-o-grid-colspan~="XL8"], [data-o-grid-colspan~="XLtwo-thirds"] {
width: 66.66667%; }
[data-o-grid-colspan~="XL9"], [data-o-grid-colspan~="XLthree-quarters"] {
width: 75%; }
[data-o-grid-colspan~="XL10"] {
width: 83.33333%; }
[data-o-grid-colspan~="XL11"] {
width: 91.66667%; }
[data-o-grid-colspan~="XL12"], [data-o-grid-colspan~="XLfull-width"] {
width: 100%; }
.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