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时指定它，那么默认情况下它是假的。如果$media-type被传入，那么我希望在@media之后打印这个变量。所以，如果我包括@include breakpoints(400, 600, only screen)，那么我想要@media only screen and..

当我试图在sassmeister上测试我的混合器时，我得到了以下错误：

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

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

现在我可以用

@include breakpoints(400, 600, only screen)

和

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

和

@include breakpoints(400, 600)

，这将返回all关键字。

Answer 2

当您返回$media类型变量时，Sass不理解您想要做什么。您需要为每个“媒体类型”设置一个if语句，例如：

@mixin breakpoints($min-width, $max-width, $media-type: false) {
  @if $media-type == print {
    @media print 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;
    }
  }
}