Sass breakpoints

_breakpoints.scss

// Get value from a Sass list of key-value items (helper function)
@function match($collection, $key) {
  @each $item in $collection {
    $index: index($item, $key);
    @if $index {
      $return: if($index == 1, 2, $index);
      @return nth($item, $return);
    }
  }
  @return false;
}
 
$breakpoints:
  small 568px,
  narrow 768px,
  standard 984px,
  modern 1240px,
  wide 1400px;
 
/*
  Usage: @include breakpoint(narrow);
  
  $point  Name of breakpoint from $breakpoints list, or exact breakpoint in pixels etc.
  $type   Use max-width or min-width query; default is 'min', invert by supplying 'max'
*/
@mixin breakpoint($point, $type: 'min', $unit: 1px) {
  $bp: match($breakpoints, $point);
  $modifier: 0;
 
  @if $type == 'max' {
    $modifier: $unit;
  }
 
  @if $bp == false {
    $bp: $point;
  }
 
  @media (#{$type}-width: $bp - $modifier) {
    @content;
  }
}