$breakpoints: (
  xs:  480px,   // Мобильные
  sm:  768px,   // Планшеты
  md:  1024px,  // Малые десктопы
  lg:  1280px,  // Обычные десктопы
  xl:  1440px   // Большие экраны
);

@mixin media-up($size) {
  @if map-has-key($breakpoints, $size) {
    @media (min-width: map-get($breakpoints, $size)) {
      @content;
    }
  } @else {
    @warn "Неизвестный брейкпоинт: #{$size}";
  }
}

@mixin media-down($size) {
  @if map-has-key($breakpoints, $size) {
    @media (max-width: calc(#{map-get($breakpoints, $size)} - 1px)) {
      @content;
    }
  } @else {
    @warn "Неизвестный брейкпоинт: #{$size}";
  }
}