_media_queries.scss

/**
 * MEDIA QUERY VARIABLES
 * ------------------------------------------------------------------------- */
$tablet_landscape_width: "1024px";
$tablet_portrait_width: "768px";
$phone_landscape_width: "667px";
$phone_portrait_width: "375px";

/**
 Mixin for Media Queries

 Example Usage
 #foo {
   color: #fff;
   @include mq(tablet_l) {
     color: #ccc;
   }
   @include mq(tablet_l) {
     color: #ddd;
   }
 }

*/
@mixin mq($mq_slug) {
  @if $mq_slug == tablet_l {
    @media (max-width: $tablet_landscape_width) { @content; }
  }
  @else if $mq_slug == tablet_p {
    @media (max-width: $tablet_portrait_width) { @content; }
  }
  @else if $mq_slug == phone_l {
    @media (max-width: $phone_landscape_width)  { @content; }
  }
  @else if $mq_slug == phone_p {
    @media (max-width: $phone_portrait_width)  { @content; }
  }
}