Media Query Sass Mixin [code snippet]

The sass mixin below has default variable values for common breakpoints. But this mixin also allows you to write a custom value if needed.

// default breakpknts
$xs: "480px";
$sm: "600px";
$md: "799px";
$lg: "1010px";
$xl: "1280px";

@mixin media-min($size) {
  @media (min-width: $size) {
    @content;
  }
}
@mixin media-max($size) {
  @media (max-width: $size) {
    @content;
  }
}

// Using a variable
@include media-max($sm) { 
    body {color:red}
}

// Custom value 
@include media-min(300px) { 
    body {color:red}
}