responsive-design - 使包含媒体查询的两个SCSS mixin共享相同的CSS代码所需的语法(Syntax needed to make two SCSS mixins containing media queries share the same CSS code)

Question

I have the following mixin containing media queries:

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

I would like to share the same CSS properties for two of those media queries but I am not succeeding in doing so.

(我想为其中两个媒体查询共享相同的CSS属性，但是我没有成功。)

I've written it as follows but it doesn't work.

(我已将其编写如下，但它不起作用。)

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

I was wondering if anyone could help.

(我想知道是否有人可以提供帮助。)

Thanks in advance for doing so!

(预先感谢您这样做！)

  ask by Fergo translate from so

Answer 1

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