Media query sass helper. Generate basic media query defined by constant breakpoints (xs, sm, md, lg) or by exact value. You can test it here https://www.sassmeister.com/gist/a9e485d45049c0bd6a1885622b85e38b

_media-query-mixin-output.css

@media (min-width: 360px) and (max-width: 991px) {
  body {
    color: blue;
  }
}
@media (min-width: 576px) {
  body {
    color: red;
  }
}
@media (min-width: 576px) and (orientation: landscape) {
  body {
    color: green;
  }
}

_media-query-mixin.scss

$breakpoints: (
  xs: 576px,
  sm: 768px,
  md: 992px,
  lg: 1200px
);

// usage: @include media-query(sm, md) { ... }
@mixin media-query($minimum, $maximum: false, $orientation: false) {
  $maximum-breakpoint: false;
  $minimum-breakpoint: $minimum;
  // is maximum set?
  @if map-has-key($breakpoints, $maximum) {
    $maximum-breakpoint: (map-get($breakpoints, $maximum) - 1);
  } @else if ($maximum != false) {
    $maximum-breakpoint: ($maximum - 1);
  }
  // get minimum value
  @if map-has-key($breakpoints, $minimum) {
    $minimum-breakpoint: map-get($breakpoints, $minimum);
  }
  
  // media query
  @media (min-width: $minimum-breakpoint) {
    @if $maximum-breakpoint {
      @media (max-width: $maximum-breakpoint) {
        @if $orientation {
          @media (orientation: $orientation) {
            @content;
          }
        } @else {
          @content;
        }
      }
    } @else if $orientation {
      @media (orientation: $orientation) {
        @content;
      }
    } @else {
      @content;
    }
  }
}

@include media-query(360px, md) {
  body { color: blue; }
}

@include media-query(xs) {
  body { color: red; }
}

@include media-query(xs, false, landscape) {
  body { color: green; }
}