Media Query Stack

mediaQueryStack.sass

$media-stack:
  (group: tablet, id: general, rule: "only screen and (min-device-width: 700px)"),
  (group: small, id: general, rule: "only screen and(min-device-width: 1100px)"),
  (group: small, id: inbetween, rule: "only screen and(min-device-width: 1100px) and (max-device-width: 1400px)"),
  (group: large, id: general, rule: "only screen and(min-device-width: 1400px)"),
  (group: print, id: general, rule: "only print"),
  (group: custom, id: screen, rule: "only screen and");

@mixin media($group, $id: general, $customRule: ""){
  @each $media in $media-stack{
    @if($group == map-get($media, group) and $id == map-get($media, id)){
      $rule: map-get($media, rule);
      @media #{$rule} #{$customRule} {@content}
    }
  }
}


// Usage:

h1{
  color: #333;
  @include media(tablet){
    font-size: 1rem;
  };
  @include media(small, inbetween){
    font-size: 1.2rem;
  };
  @include media(small){
    color: #000;
  };
  @include media(custom, screen, " (max-device-width: 360px)"){
    color: blue;
  };
}

Notes

Group: This is the group name for the query. This is value is shared by many keys. Examples are tablet, small, 1400. 'custom' allows you to to set a $CustomRule

ID: Query unique identifier. This should be unique among the group. Examples are general, inbetween, exclude. Since it might be rare for actual groups, the default is general.

Rule: This is the actual rule you want for the query. The query NEEDS to be in quotations, or Sass will error out.