SCSS mixin for media query responsive

mixin-media-query.scss

$screen-xs-max: 599px;
$screen-sm-min: 600px;
$screen-md-min: 960px;
$screen-lg-min: 1280px;
$screen-xl-min: 1920px;

@mixin xs {
  @media screen and (max-width: #{$screen-xs-max}) {
    @content;
  }
}

@mixin sm {
  @media screen and (min-width: #{$screen-sm-min}) {
    @content;
  }
}

@mixin md {
  @media screen and (min-width: #{$screen-md-min}) {
    @content;
  }
}

@mixin lg {
  @media screen and (min-width: #{$screen-lg-min}) {
    @content;
  }
}

@mixin xl {
  @media screen and (min-width: #{$screen-xl-min}) {
    @content;
  }
}

// Usage example
// pageAbc.scss
@import './mixin-media-query.scss';
.content {
  color: red;
  @include sm {
    color: blue;
  }
  @include md {
    color: yellow;
  }
}