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

Question

我有以下包含媒体查询的 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-designmedia-queriesmultiple-instancesscss-mixins

Answer 1

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

在混合文件中：

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

然后你应该使用它：

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