media-queries-with-sass.scss

/**
 * Media query mixin so we don't need to duplicate breakpoints throughout stylesheets.
 *
 * It's better to use em for breakpoints instead of px where possible.
 * http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/#relative
 *
 * .example {
 *   @include media-query(phone OR tablet OR desktop) {
 *     color: blue;
 *   }
 * }
 */

@mixin media-query($type) {
  @if $type == phone {
    @media only screen and (max-width: 480px) {
      @content;
    }
  }
  @else if $type == tablet {
    @media only screen and (min-width: 481px) and (max-width: 768px) {
      @content;
    }
  }
  @else if $type == desktop {
    @media only screen and (min-width: 769px) { 
      @content;
    }
  }
}

.example {
  width: 100%;
  height: 100px;
  
  @include media-query(phone) {
    background-color: red;
  }
  
  @include media-query(tablet) {
    background-color: green;
  }
  
  @include media-query(desktop) {
    background-color: blue;
  }
}