MQ

example.scss

$mediaQueryHacks: (maxWidth767, '(max-width: 767px)');

@mixin respond-to($name, $list: $mediaQueries) {
  @if map-has-key($mediaQueries, $name) {
    @media #{map-get($mediaQueries, $name)} {
      @content;
    }
  } @else {
    @error "MediaQuery #{$name} does not exist";
  }
}


@include respond-to(maxWidth767, $mediaQueryHacks) {
  background: red;
}