Skip to content

Instantly share code, notes, and snippets.

@patrickpietens
Created March 30, 2015 10:31
Show Gist options
  • Save patrickpietens/36a068100e1c3d5d6b9d to your computer and use it in GitHub Desktop.
Save patrickpietens/36a068100e1c3d5d6b9d to your computer and use it in GitHub Desktop.
Mediaquery mixin to rule them all
$breaks: (
"small": (min: 0em, max: 34.99em),
"normal": (min: 35em, max: 47.99em),
"wide": (min: 48em, max: 64.99em),
"widest": (min: 65em, max: null)
);
@mixin only-responds-to($breakpoint, $portrait: false) {
$myBreakpoint: map-get($breaks, $breakpoint);
$myMin: map-get($myBreakpoint, min);
$myMax: map-get($myBreakpoint, max);
$myQuery: "only screen and (min-width: " + $myMin + ")";
@if $myMax { $myQuery: $myQuery + "and (max-width: " + $myMax + ")"; }
@if $portrait { $myQuery: $myQuery + "and (orientation: portrait)"; }
@media #{$myQuery} {
@content;
}
}
@mixin responds-to($breakpoints...) {
$myQuery: null;
@if length($breakpoints) == 1 {
$myBreakpoint: map-get($breaks, nth($breakpoints, 1));
$myWidth: map-get($myBreakpoint, min);
$myQuery: "only screen and (min-width:" + $myWidth + ")";
}
@else if length($breakpoints) > 1 {
@each $breakpoint in $breakpoints {
$myBreakpoint: map-get($breaks, $breakpoint);
$myMin: map-get($myBreakpoint, min);
$myMax: map-get($myBreakpoint, max);
$myCondition: "only screen and (min-width: " + $myMin + ") and (max-width: " + $myMax + ")";
@if index($breakpoints, $breakpoint) == 1 {
$myQuery: $myCondition;
} @else {
$myQuery: $myQuery + " , " + $myCondition;
}
}
}
@media #{$myQuery} {
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment