Generated by SassMeister.com.

SassMeister-input.scss

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

$breakpoints: (
  // This needs to be quoted otherwse only the `(max-width: 900px)`
  // is outputted.
  "small": "(min-width: 480px) and (max-width: 900px)",
  // "small": (min-width: 480px) and (max-width: 900px),
  "medium": (min-width: 480px),
);

/// Responsive manager.
/// @access public
/// @param {String} $breakpoint - Breakpoint
/// @requires $breakpoints
/// Taken from http://sass-guidelin.es/#media-queries-usage
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    $query: map-get($breakpoints, $breakpoint);
    $query: if(type-of($query) == "string", unquote($query), inspect($query));
    @media #{$query} {
      @content;
    }
  }

  @else {
    @error 'No value found for `#{$breakpoint}`. '
         + 'Please make sure it is defined in `$breakpoints` map.';
  }
}

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

SassMeister-output.css

@media (min-width: 480px) and (max-width: 900px) {
  .input {
    color: red;
  }
}