Mobile First Responsive Design Breakpoints SASS Mixin

cpcwood | Last updated: August 09^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 {
    @error '@mixin respond-to: `#{$name}` is not a key in breakpoints.' +
    ' Available breakpoints are: `#{$breakpoints}`';
  }
}

Add to project SASS Mixins with defined screen size breakpoints in $breakpoints map.

Use @include at-rule in an existing CSS rule to include new declarations at specific breakpoints.

For example:

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

.header {
  width: 100%;

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