Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v2.0.0)
// ----

@import "sass-list-maps";

@mixin respond-to($name) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $name) {
    // Prints a media query based on the value
    @media screen and #{map-inspect(map-get($breakpoints, $name))} {
      @content;
    }
  }
 
  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}

$breakpoints: (
  ('small', 'max-width: 767px' ),
  ('medium', 'min-width: 992px' ),
  ('large',  'max-width: 1200px' )
);

.test {
  @include respond-to('small') {
    color: red;
  }
}

SassMeister-output.css

@media screen and (max-width: 767px) {
  .test {
    color: red; } }