SASS Responsive Breakpoints Mixin

cpcwood | Last updated: February 16^th, 2021

$breakpoints: (
  'tablet' : ( min-width: 767px ),
  'desktop': ( min-width: 1100px ),
  'extra-wide': ( min-width: 2560px )
);

@mixin respond-to($name) {
  @if map-has-key($breakpoints, $name) {
    @media #{inspect(map-get($breakpoints, $name))} {
      @content;
    }
  }
  @else {
    @warn 'Unfortunately, no value could be retrieved from `#{$breakpoints}`. '
      + 'Please make sure it is defined in `$breakpoints` map.';
  }
}

Add to project mixins with defined breakpoints in $breakpoints map.

Use mixin in CSS rule written in SCSS to design mobile-first. For example:

@use 'path/to/mixins' as *;

.header {
  width: 100%;

  @include respond-to(tablet) {
    width: 767px;
  }
}