Cacher is the code snippet organizer for pro developers

h1 {
  color: #333;
}

@media only screen and (min-device-width: 700px) {
  h1 {
    font-size: 1rem;
  }
}

@media only screen and (min-device-width: 700px) and (min-device-pixel-ratio: 2) {
  h1 {
    font-size: 1rem;
  }
}

@media only screen and (min-device-width: 1100px) and (max-device-width: 1400px) {
  h1 {
    font-size: 1.2rem;
  }
}

@media only screen and (min-device-width: 1100px) {
  h1 {
    color: #000;
  }
}

// ----
// libsass (v3.2.4)
// ----

$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(tablet, general, " and (min-device-pixel-ratio: 2)"){
    font-size: 1rem;
  };
  
  @include media(small, inbetween){
    font-size: 1.2rem;
  };
  @include media(small){
    color: #000;
  };
  @include media(custom," (max-device-width: 360px)"){
    color: blue;
  };
  
}