No media query for xs

Hi There are a great mixins for media query media-breakpoint-*, but it’s not possible to build media query for xs. I tried to use media-breakpoint-between(xs, xs). In my opinion it should return:

@media (min-width: 0) and (max-width: 576px) {

but it returns:

@media (min-width: null) and (max-width: 576px) {

The problem is in breakpoint-min function:

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

This small fix with return solves the problem:

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return $min;
}

So null will be returned only when breakpoint does not exists.

[robertzajda]

Yes, I did, but how about larger condition? Ex. media-breakpoint-between(xs, sm). The problem is that the function breakpoint-min never returns 0, but it shoud. Secondly something like:

media-breakpoint-between(xs, xs)

Could return:

@media (max-width: 576px) {

instead of:

@media (min-width: 0) and (max-width: 576px) {

or instead like now:

@media (min-width: null) and (max-width: 576px) {

null should be never returned becouse it’s not correct css value in this case.

[mdo]

#23997 merged, so closing.