@mixin media-queries

This is a relatively simple media query mixin that uses the beautiful Sass @content directive
and allows me to handle screen sizes inline with the rest of my style. This prevents a lot of
debugging headaches down the road. I set the dimensions of my media variables once, and then never have to deal with them again.


// Breakpoints for each query
$smartphone: 480px;
$tabletPortrait: 767px;
$tabletLandscape: 1024px;
$desktop: 1174px;
$largeScreen: 1400px;
@mixin respondTo($media) {
  @if $media == smartphone {
    @media (max-width: $smartphone) { @content; }
  }
  @else if $media == tablet {
    @media (min-width: $tabletPortrait) and (max-width: $tabletLandscape) { @content; }
  }
  @else if $media == smallScreen {
    @media (max-width: $desktop) { @content; }
  }
  @else if $media == desktop {
    @media (min-width: $desktop) { @content; }
  }
}



Example usage

div {
    // regular styles here
    @include respondTo(desktop) {
        &:hover { background: blue; } // only add the hover effect on desktop browsers
    }
}