Generated by SassMeister.com.

SassMeister-input.scss

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

/**
* This file is a helper to easy make media queries.
*
* How to use:
* @include respond-to(small) { ... }
* @include respond-to(medium) { ... }
* @include respond-to(large) { ... }
**/

$breakpoints: (
        'small'  : (min-width: 768px),
        'medium' : (min-width: 992px),
        'large'  : (min-width: 1200px),
        'complex-extra-small' : (min-width: 0) and (max-width: 992px),
//        'complex-small'       : 'min-width: 768px and max-width: 992px',
//        'complex-medium'      : 'min-width: 992px and max-width: 1200px',
);



@mixin respond-to($breakpoint) {
  // Retrieves the value from the key
  $value: map-get($breakpoints, $breakpoint);

  // If the key exists in the map
  @if $value != null {
    // Prints a media query based on the value
    @media ($value) {
      @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. see sass/helper/breakpoints.scss file";
  }
}


    @include respond-to(complex-extra-small) {
  background:green;
}

SassMeister-output.css

(max-width: 992px) isn't a valid CSS value.