Media queries mixin with devices map

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

$devices: (tablet: 768px, phone: 320px);

@mixin respond-to($device) {
  @if (map-has-key($devices, $device)) {
    @media (max-width: map-get($devices, $device)) {
      @content;
    }
  }
  @else {
    @warn "Device key not found.";
  }
}

h1 {
  width: 600px;

  @include respond-to(tablet) {
    width: 100%;
    background: red;
  }

  @include respond-to(phone) {
    width: 200px;
  }
}

SassMeister-output.css

h1 {
  width: 600px;
}
@media (max-width: 768px) {
  h1 {
    width: 100%;
    background: red;
  }
}
@media (max-width: 320px) {
  h1 {
    width: 200px;
  }
}

SassMeister-rendered.html