CSS Breakpoints mixin for SASS + example usage

breakpoint.scss

$_BREAKPOINTS: (
  print: print,
  xs: screen, // mobile-first fallback
  sm: 48rem,
  md: 64rem,
  lg: 75rem
) !global;

@mixin breakpoint($point, $type: min) {
  @if (type-of($point) == string) {
    $point: map-get($_BREAKPOINTS, $point);

    @if ($point == null) {
      @error 'invalid breakpoint "#{$point}".';
    }
  }

  $query: if(type-of($point) == number, '(#{$type}-width: #{$point})', $point);

  @media #{$query} {
    @content;
  }
}

// Usage
// @include breakpoint(md) {
//   height: 3.125rem;
// }

// @include breakpoint(48.625rem, max) { // Custom breakpoint
//   height: calc(2rem + 2px);
//   border-width: 2px 0;
// }

// @include breakpoint(print) {
//   border-radius: unset;
// }