a {
  color: red;
}

$breakpoints: (
  s-handset-p:  0px,
  m-handset-p:  360px,
  l-handset-p:  400px,
  xl-handset-p: 480px,
  s-tablet-p:   600px,
  m-tablet-p:   720px,
  l-tablet-p:   840px,
  s-handset-l:  480px,
  m-handset-l:  600px,
  l-handset-l:  720px,
  xl-handset-l: 840px,
  s-tablet-l:   960px,
  m-tablet-l:  1024px,
  l-tablet-l:  1280px,
  s-desktop:   1440px,
  m-desktop:   1600px,
  l-desktop:   1920px
);

@mixin handset {
  @media screen and (max-width: #{map-get($breakpoints, xl-handset-p)}) {
    @content;
  }
}

@mixin tablet-up {
  @media screen and (min-width: #{map-get($breakpoints, xl-handset-p) + 1}) {
    @content;
  }
}