Responsive design 使包含媒体查询的两个SCSS混合共享相同CSS代码所需的语法

我有以下包含媒体查询的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
   }

---

我想知道是否有人能帮忙。提前感谢您这么做

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

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

在mixin文件中：

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

然后你应该使用它：

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