Mixin media-breakpoint-down doesn't work for the largest breakpoint

[thomasfrobieter]

Config:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1300px
);

Mixin call:

.bla{
  @include media-breakpoint-down(xl){
    display:none;
  }
}

CSS output:

.bla{
  display:none;
}

Mixin/Debugging:

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @debug("===========");
  @debug($name);  // ==> xl
  @debug($max); // ==> null
  @debug("===========");
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

This is because the breakpoint-max function ...

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
}

... is (also) designed for the media-breakpoint-between mixin. So, the media-breakpoint-down mixin needs to address this.

Possible fix:

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    // Largest (last) breakpoint
    @media (max-width: (map-get($grid-breakpoints, $name) - 1px)) {
      @content;
    }
  }
}

Thoughts?