breakpoints.scss

$breakpoints: (
  sm: (0em, 40em),
  md: (40.063em, 64em),
  lg: (64.063em, 90em)
);

@function lower-bound($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range, 1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}

@function add-breakpoint($key, $value) {
  @return map-merge($breakpoints, ($key: $value));
}

@function get-query($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @return map-get($breakpoints, $breakpoint);
  }
  @warn "Unknown `#{$breakpoint}` in $breakpoints.";
  @return null;
}

@mixin add-breakpoint($name, $bounds) {
  $breakpoints: add-breakpoint($name, $bounds) !global;
}

@mixin add-bp($name, $bounds) {
  @include add-breakpoint($name, $bounds);
}

@mixin above($breakpoint) {
  $query: get-query($breakpoint);
  @media screen and (min-width: #{upper-bound($query)}) {
    @content
  }
}

@mixin below($breakpoint) {
  $query: get-query($breakpoint);
  @media screen and (max-width: #{lower-bound($query)}) {
    @content
  }
}

@mixin when($breakpoint) {
  $query: get-query($breakpoint);
  @media screen and (min-width: #{lower-bound($query)}) and (max-width: #{upper-bound($query)}) {
    @content
  }
}

@mixin except($breakpoint) {
  $query: get-query($breakpoint);
  @media not screen and (min-width: #{lower-bound($query)}) and (max-width: #{upper-bound($query) - 0.01}) {
    @content
  }
}

@include add-breakpoint(module, (540px, 960px));