创建隐藏类

Question

我尝试从 bootstrap 4 中获取一个 mixin。不幸的是，有一个我无法解释的错误。

这是我的 SASS 代码：

$mdc-layout-grid-breakpoints: (
  desktop: 840px,
  tablet: 480px,
  phone: 0px
);

@mixin media-breakpoint-up($name, $breakpoints:  $mdc-layout-grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);

  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

@each $breakpoint in map-keys($mdc-layout-grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $mdc-layout-grid-breakpoints);

    .d#{$infix}-none         { display: none !important; }
    .d#{$infix}-inline       { display: inline !important; }
    .d#{$infix}-inline-block { display: inline-block !important; }
    .d#{$infix}-block        { display: block !important; }
    .d#{$infix}-table        { display: table !important; }
    .d#{$infix}-table-row    { display: table-row !important; }
    .d#{$infix}-table-cell   { display: table-cell !important; }
    .d#{$infix}-flex         { display: flex !important; }
    .d#{$infix}-inline-flex  { display: inline-flex !important; }
  }
}

控制台中的错误： 我不明白带有“&”的信息。

Error in plugin 'sass'
Message:
src\scss\mixins\_display.scss
Error: Base-level rules cannot contain the parent-selector-referencing character '&'.

   Backtrace:
    src/scss/mixins/_display.scss:40, in mixin `@content`
    src/scss/mixins/_display.scss:29, in mixin `media-breakpoint-up`
    src/scss/mixins/_display.scss:37
    on line 40 of src/scss/mixins/_display.scss
>>         .d#{$infix}-none         { display: none !important; }
--------^

希望得到帮助:-)

Answer 1

似乎很难确定样式代码从哪里开始，选择器代码在哪里结束。 因此，这样的hack：

.d#{$infix + '-none'}  { display: none !important; }