Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

$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}
    }
  }
}
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;
  };
}

SassMeister-output.css

h1 {
  color: #333; }
  @media only screen and (min-device-width: 700px) {
    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; } }
  @media only screen and (max-device-width: 360px) {
    h1 {
      color: blue; } }