Why does this nested mixin repeat its parent selector?-CodePudding

Why does the mixin evaluate to include the parent class (.btn-rounded), when nested inside a class rule?

bootstrap/scss/mixins:

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

styles.scss:

.btn-rounded {

    @include media-breakpoint-down(sm){
        display: none;
    }

  position: relative;
  background-color: white;

}

styles.css:

.btn-rounded {
  position: relative;
  background-color: white;
}

@media (max-width: 575.98px) {
  .btn-rounded {
    display: none;
  }
}

CodePudding user response：

Media queries like @media (max-width: 575.98px) must be top level in css. So for the compiled css to work it needs to be unnested and appear on top level.

SASS automatically does that for you.

For the rules to target the proper element - even tho it has been unnested - it needs to repeat the selector (.btn-rounded).

You can learn more about media queries in their documentation.

I also found this article pretty useful on how to work around this problem in sass in general.