Комбинация SASS медиа-запросов

Question

У меня есть миксин SASS для медиа-запросов, который хорошо работает, особенно при вложении, но проблема в том, что я не могу понять, как я могу написать свой миксин, чтобы я мог комбинировать разные медиа-запросы.Есть ли способ, которым я могу сохранить простоту моего миксина, но разрешить несколько комбинированных запросов?

Например:

@include media(tablet-p) and media(phone) {
     width: 100%;
}

Это мой текущий миксин ниже, в том числе, как я его используюв настоящее время.

@mixin media($size) {
    @if $size == laptop {
        @media screen and (min-width:1201px) and (max-width:1440px) {
            @content;
        }
    } @else if $size == tablet-l {
        @media screen and (min-width:1024px) and (max-width:1200px) {
            @content;
        }
    } @else if $size == tablet-p {
        @media screen and (min-width:768px) and (max-width:1023px) {
            @content;
        }
    } @else if $size == phone {
        @media screen and (max-width: 767px) {
            @content;
        }
    }
}

@include media(phone) {
    width: 100%;
}

Answer 1

Не хамите или что-то в этом роде, пожалуйста, не принимайте это так, но это не простой миксин или гибкий.

Имейте переменные или карту ваших точек останова, и миксин, который их принимает.Сначала я работаю с мобильными устройствами, поэтому всегда начинаю с мобильных стилей, поэтому мои наиболее часто используемые случаи - small, medium, то есть min-width.Иногда вы должны использовать to-small ect ..

$breakpoints: (
  'to-small'      : ( max-width:  766px ),
  'small'         : ( min-width:  767px ),
  'to-medium'     : ( max-width:  991px ),
  'medium'        : ( min-width:  992px ),
  'to-large'      : ( min-width: 1199px ),
  'large'         : ( min-width: 1200px ),
  'to-x-large'    : ( min-width: 1599px ),
  'x-large'       : ( min-width: 1600px )
);

mixin

@mixin media($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media #{inspect(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  }

  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}

Использование

.block {
  width: 100%;

  // this query will apply from widths larger then 1200px
  // meaning you have the same for mobile and tablet
  @include media('large') {
    width: 25%;
  }
}

.block {
  width: 100%;

  // this query will apply from widths larger then 992px (landscape tablet)
  // meaning you have the same for mobile and tablet portrait
  @include media('medium') {
    width: 25%;
  }
}