使包含媒体查询的两个 SCSS mixin 共享相同 CSS 代码所需的语法答案

【问题标题】：Syntax needed to make two SCSS mixins containing media queries share the same CSS code使包含媒体查询的两个 SCSS mixin 共享相同 CSS 代码所需的语法
【发布时间】：2020-03-04 07:42:43
【问题描述】：

我有以下包含媒体查询的 mixin：

@mixin respond($breakpoint) {
    @if $breakpoint == phone {
        @media only screen and (max-width: 37.5em) { @content };    //600px
    }
    @if $breakpoint == tab-port {
        @media only screen and (max-width: 56.25em) { @content };     //900px
    }
    @if $breakpoint == tab-land {
        @media only screen and (max-width: 75em) { @content };    //1200px
    }
    @if $breakpoint == big-desktop {
        @media only screen and (min-width: 112.5em) { @content };    //1800px
    }
}

我想为其中两个媒体查询共享相同的 CSS 属性，但我没有成功。我已经写了如下，但它不起作用。

    @include respond(phone),
    @include respond(tab-port) {
        some CSS properties
   }

我想知道是否有人可以提供帮助。提前感谢您这样做！

【问题讨论】：

标签： responsive-design media-queries multiple-instances scss-mixins

【解决方案1】：

您可以使用您希望它们共享的属性创建另一个 mixin，然后在每个包含中使用它。

在混合文件中：

@mixin two-device {
  @media (max-width: 37.5em) {
    @content;
  }
  @media (max-width: 56.25em) {
    @content;
  }
}

然后你应该使用它：

  @include two-device {
    font-size: 50%;
  }

【讨论】：

【解决方案2】：

@mixin respond($breakpoint) {
    @if $breakpoint == phone {
        @media only screen and (min-width: 37.5em) { @content; }    //600px
    }
    @else if $breakpoint == tab-port {
        @media only screen and (min-width: 56.25em) { @content;}     //900px
    }
    @else if $breakpoint == tab-land {
        @media only screen and (min-width: 75em) { @content; }    //1200px
    }
    @else $breakpoint == big-desktop {
        @media only screen and (min-width: 112.5em) { @content; }    //1800px
    }
}

【讨论】：