Skip to content

Instantly share code, notes, and snippets.

@IcarusFW
Last active August 29, 2015 14:14
Show Gist options
  • Save IcarusFW/62b481c3de0827e671f0 to your computer and use it in GitHub Desktop.
Save IcarusFW/62b481c3de0827e671f0 to your computer and use it in GitHub Desktop.
autogenerating IE-fallback mediaquery mixin
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
//
// a combination of the z-index property map Gist: http://sassmeister.com/gist/29202828a1c37714f5e1
// and Jake Archibald's IE-friendly Sass mediaqueries: http://jakearchibald.github.io/sass-ie/
// thanks to both for their respective contributions.
//
// this variation uses named breakpoints taken from a map, rather than using hardcoded values within
// the mixin call. removes the need for hardcoded arbitrary values within code.
//
// usage: @include respond-to(name-of-breakpoint, breakpoint-type, breakpoint-map) { @content; }
//
// 'breakpoint-type' defaults to 'default' unless specified, and if specified,
// 'breakpoint-map' (usually $breakpoints) needs to be called, too.
//
// setup an IE-based stylesheet as per Jake's instructions to create an autogenerated, mediaquery-less
// fallback stylesheet which can be included in HTML via IE conditionals.
// ----
$fix-mqs: false !default;
$breakpoints: (
default: (
mobile-skinny: 20em,
mobile-wide: 30em,
tablet: 45em,
desktop: 60em,
superwide: 67.5em
)
);
@mixin respond-to($width, $type: default, $array: $breakpoints) {
@if map-has-key($breakpoints, $type) {
@if map-has-key(map-get($breakpoints, $type), $width) {
@if $fix-mqs {
@if $fix-mqs >= map-get(map-get($breakpoints, $type), $width) {
@content;
}
} @else {
@media screen and (min-width: map-get(map-get($breakpoints, $type), $width)) {
@content;
}
}
} @else {
@warn 'There is no element "#{$name}" in the widths map.'
}
} @else {
@warn 'The desired type "#{$type}" is not available, please add it to the map of specify another.'
}
}
$old-ie: false !default;
@mixin old-ie {
@if $old-ie {
@content;
}
}
//$fix-mqs: 80em;
//$old-ie: true;
body {
@include respond-to(superwide) {
background-color: #bada55;
}
@include old-ie {
zoom: 1;
}
}
@media screen and (min-width: 67.5em) {
body {
background-color: #bada55;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment