为什么这个嵌套的 mixin 会重复它的父选择器？

Question

当嵌套在 class 规则中时，为什么 mixin 评估包含父 class（.btn 舍入）？

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;
  }
}

Answer 1

像 @media (max-width: 575.98px) 这样的媒体查询必须是 css 中的顶级。因此，要使编译后的 css 正常工作，它需要取消嵌套并出现在顶层。

SASS 自动为您完成。

为了使规则以正确的元素为目标 - 即使它没有嵌套 - 它需要重复选择器 (.btn-rounded)。

您可以在 documentation.

中了解有关媒体查询的更多信息

我还发现这个 article 对于如何在 sass 中解决这个问题非常有用。

为什么这个嵌套的 mixin 会重复它的父选择器？

Why does this nested mixin repeat its parent selector?

sass

twitter-bootstrap