A mixin for tokenizing `@media` queries.

_mixins.scss

$bkpoints: (
  xs: 27rem,
  sm: 37.5rem,
  md: 56.25rem,
  lg: 62.5rem,
  xl: 120rem
);
// ^ This was for a particular client, you can use whichever
     breakpoints are best for your use case.

@mixin screen($screen) {
  $bk: $screen;
  // This @if allows you to use values like "md" OR "727px" for
     custom breakpoints.
  @if (map-get($bkpoints, $screen)) {
    $bk: map-get($bkpoints, $screen);
  }
  @media screen and (min-width: $bk) {
    @content;
  }
}