Question

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

@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时指定它。如果在mixin中传递$media-type，那么我希望在@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;
    }
  }
}

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

现在我可以用

调用mixin

@include breakpoints(400, 600, only screen)

和

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

和

@include breakpoints(400, 600)

将带回所有关键字

Answer 2

当你传回$ media-type变量时，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;
    }
  }
}

scss错误预期媒体查询

2 个答案: