Media Query Mixin

A sass mixin for breakpoint based media-queries

This is my go-to snippet when building breakpoint-based responsive websites with sass. It consists of a map of breakpoints ($breakpoints) and a two mixins (media-min($bp) & media-max($bp)).

scss
$breakpoints: (
    sm: 640px,
    md: 768px,
    lg: 1024px,
    xl: 1280px,
);

@mixin media-min($bp) {
  @media screen and (min-width: map_get($breakpoints, $bp) + 1) {
    @content;
  }
}

@mixin media-max($bp) {
  @media screen and (max-width: map_get($breakpoints, $bp)) {
    @content;
  }
}

To use it, call the mixin with the desired breakpoint:

scss
@include media-min('sm') {
  // CSS goes here
}