Last active
August 29, 2015 14:14
-
-
Save IcarusFW/62b481c3de0827e671f0 to your computer and use it in GitHub Desktop.
autogenerating IE-fallback mediaquery mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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