Синтаксис необходим, чтобы два миксина SCSS, содержащие медиа-запросы, использовали один и тот же код CSS - PullRequest
Новая
       49

Синтаксис необходим, чтобы два миксина SCSS, содержащие медиа-запросы, использовали один и тот же код CSS

0 голосов
/ 07 ноября 2019

У меня есть следующий миксин, содержащий медиа-запросы: 

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

Мне было интересно, может ли кто-нибудь помочь. Заранее спасибо за это!

1 Ответ

0 голосов
/ 07 ноября 2019 
@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
    }
}
...