Skip to content

Instantly share code, notes, and snippets.

@katrinkerber
Created April 17, 2015 10:22
Show Gist options
  • Save katrinkerber/af8a43d93b35ccc5c123 to your computer and use it in GitHub Desktop.
Save katrinkerber/af8a43d93b35ccc5c123 to your computer and use it in GitHub Desktop.
Media query mixin
/*
Media query mixin
Adapted from http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
Examples:
@include media-query(min, 704px) {}
@include media-query(max, 704px) {}
@include media-query(min-max, 360px, 859px) {} */
@mixin media-query($constraint, $breakpoint1, $breakpoint2: null) {
@if $constraint == "min" {
$emBreakpoint: ($breakpoint1 / 16px) * 1em ;
@media only screen and (min-width: $emBreakpoint) {
@content;
}
} @else if $constraint == "max" {
$emBreakpoint: ($breakpoint1 / 16px) * 1em ;
@media only screen and (max-width: $emBreakpoint) {
@content;
}
} @else if $constraint == "min-max" {
$emBreakpoint1: ($breakpoint1 / 16px) * 1em ;
$emBreakpoint2: ($breakpoint2 / 16px) * 1em ;
@media only screen and (min-width: $emBreakpoint1) and (max-width: $emBreakpoint2) {
@content;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment