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

2024-05-21 • 问答

我有以下包含媒体查询的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，然后在每个包含中使用它。

在混合文件中：

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

然后您应该使用它：

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

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

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

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

大家都在问