Setting up breakpoints

_breakpoints.scss

$breakpoints: (
  small: 767px,
  medium: 992px,
  large: 1200px
);

// _mixins.scss
@mixin breakpoint($breakpoint) { 
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  }

  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}

_implementation.scss

// Scss
.m-tabs {
  background-color: #f2f2f2;

  @include breakpoint(medium) {
    background-color: #666;
  }
}