Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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