Skip to content

Instantly share code, notes, and snippets.

@micahgodbolt
Last active December 14, 2015 16:59
Show Gist options
  • Save micahgodbolt/5119387 to your computer and use it in GitHub Desktop.
Save micahgodbolt/5119387 to your computer and use it in GitHub Desktop.
My respond-to mixin.
$small = 400px;
$medium = 800px;
$upto-medium = $medium, max-width;
@mixin respond-to($primary, $secondary:min-width) {
@if $secondary == max-width {
@media screen and (max-width: $primary - 1) { @content; }
}
@else if $secondary == min-width {
@media screen and (min-width: $primary) { @content; }
}
@else {
@media screen and (min-width: $primary) and (max-width: $secondary - 1) { @content; }
}
}
// Usesage
@include respond-to(500px) { //min-width is default
}
@include respond-to(800px, max-width) {
}
@include respond-to(500px, 800px) {
}
@include respond-to($small) {
}
@include respond-to($upto-medium) {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment