brakepoint sass

gistfile1.txt

$breakpoints: (
  'medium': (min-width: 200px),
  'large': (min-width: 400px),
  'huge': (min-width: 600px),
);

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media #{inspect(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  } @else {
    @error 'Не указано значение для `#{$breakpoint}`. '
         + 'Пожалуйста, убедитесь, что точка остановки объявлена в карте `$breakpoints`.';
  }
}

@include respond-to(medium) {
  color: red;
}