css - scss 错误预期媒体查询

Question

我正在为媒体查询做一个 scss 混合

@mixin breakpoints($min-width, $max-width, $media-type: false) {
  @if $media-type == true {
    @media $media-type and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  } @else {
    @media all and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  }
}

$media-type 默认为 false，如果我不想在调用 mixin 时指定它。如果 $media-type 在 mixin 中传递，那么我希望在 @media 之后打印该变量。因此，如果我包含 mixin @include breakpoints(400, 600, only screen)，结果我想要 @media only screen and..

当我尝试在 sassmeister 上测试我的 mixin 时，我得到了这个错误:

Invalid CSS after "    @media ": expected media query (e.g. print, screen, print and screen), was "$media-type and..."

我做错了什么？

Answer 1

我找到了一种无需为每种媒体类型指定 if 语句即可工作的方法。

@mixin breakpoints($min-width, $max-width, $media-type: false) {
  @if $media-type {
    @media #{$media-type} and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  } @else {
    @media all and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  }
}

key 在#{$media-type} 中。现在一切正常，但我不知道我的解决方案有多正确。

现在我可以调用mixin了

@include breakpoints(400, 600, only screen)

和

@include breakpoints(400, 600, 'only screen')

和

@include breakpoints(400, 600)

这将带回 all 关键字