Question regarding media-breakpoint-between

[ksrb]

I was trying out @media-breakpoint-between but it doesn't behave the way I expected.

Given:

@include media-breakpoint-between(sm, md) {
  div {
    background: tomato;
  }
}

Actual:

@media (min-width: 576px) and (max-width: 991px) {
  div {
    background: tomato;
  }
}

Expected:

@media (min-width: 576px) and (max-width: 768px) {
  div {
    background: tomato;
  }
}

Example with extracted code in sassmeister.

Respective files:

• https://github.com/twbs/bootstrap/blob/78fc4d23fcefe31397444b75f43728c38e13c590/scss/mixins/_breakpoints.scss

• bootstrap/scss/_variables.scss

  Lines 181 to 187 in 78fc4d2

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

[ksrb]

FYI if breakpoint-max is changed from:

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

To:

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

It works as expected.

[mdo]

That's not the right fix I think @ksrb; that doesn't snag the next breakpoint at all. I think what we need to do is clear up the nested mixins on the between mixin and then not reuse that one for the only mixin. Doesn't make sense to map those to one another.

Change I'm suggesting is explicit min and max mapping:

// source
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-max($lower, $breakpoints);
  $max: breakpoint-max($upper, $breakpoints);

  @media (min-width: $min) and (max-width: $max) {
    @content;
  }
}

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  $max: breakpoint-max($name, $breakpoints);

  @media (min-width: $min) and (max-width: $max) {
    @content;
  }
}

// examples
.test {
  @include media-breakpoint-between(sm, md) {
    background: red;
  }
}
.test2 {
  @include media-breakpoint-only(sm) {
    background: blue;
  }
}

Which outputs this:

@media (min-width: 767px) and (max-width: 991px) {
  .test {
    background: red;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .test2 {
    background: blue;
  }
}

[ksrb]

@mdo sorry to come back to this after so many months, so it seems like there was actually a bug.

But I was mostly confused about the semantics of the breakpoint functions.

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

To me @media-breakpoint-between(sm, md) should target sm: 576px and md: 768px.

But what it does is target the 'next' breakpoints md: 768px and lg: 992px.

I'm just trying to understand the reason for this, when you see @media-breakpoint-between how do you interpret it? Maybe it'll help me get my head around it.

[ionesculiviucristian]

I'm also confused of this (using BS 4.1.3):

      @include media-breakpoint-between(sm, md) {
        grid-template-columns: 1fr 1fr;
      }

and it's outputting

@media (max-width: 991.98px) and (min-width: 576px)
.representative-sheet-options-container .representative-sheet-options.culoare-esarfa, .representative-sheet-options-container .representative-sheet-options.culoare-esarfa-sef-de-promotie {
    grid-template-columns: 1fr 1fr;
}

I was expecting between 576 and 768.

[kceb]

I'm also confused of this (using BS 4.1.3):

      @include media-breakpoint-between(sm, md) {
        grid-template-columns: 1fr 1fr;
      }

and it's outputting

@media (max-width: 991.98px) and (min-width: 576px)
.representative-sheet-options-container .representative-sheet-options.culoare-esarfa, .representative-sheet-options-container .representative-sheet-options.culoare-esarfa-sef-de-promotie {
    grid-template-columns: 1fr 1fr;
}

I was expecting between 576 and 768.

I was caught up on this for a second, but it's because the md range goes (in your case) from 768 to 991. When you specify media-breakpoint-between, you are considering the entire ranges of the breakpoints.

That is from 576 for the start of the sm breakpoint to 991.98, the end of the md breakpoint range. The next breakpoint range for lg starts at 992.