Медиазапросы в SCSS — ещё один удобный способ использования @media screen

Привет!

Недавно столкнулась с проблемой медиазапросов в проекте, собранном на Angular. Уже не помню, какие именно ограничения заставили меня написать миксин для упрощения своей работы, но поделиться результатом и получить фидбек очень хочется. Встречала много других подобных примеров, но для работы мне понятнее и удобнее использовать именно этот.

В общем, для удобства составила себе такие требования:

1. Размеры экранов должны быть вынесены отдельно, чтобы можно было глобально в одном месте поменять поведение (например, вместо «320px» передавать просто «xs»).
2. Данный миксин с медиазапросами может быть не только в одну сторону (например, не всегда только max-width).
3. Миксин может использоваться и отдельно, переопределяя описанные классы внутри, или описываться в теле родителя, переопределяя его свойства.

Итак, определим любые нужные нам разрешения. Например:

$sizes: ("xs":320px, "sm":576px, "md":768px, "lg":992px, "xl":1200px);

Для начала, напишем миксин, который бы принимал нужный префикс диапазона и разрешение, под которое мы ограничиваемся:

@mixin media($minmax, $media) {
  @each $size, $resolution in $sizes {
    @if $media == $size {
      @media only screen and (#{$minmax}-width: $resolution) {
        @content;
      }
    }
  }
}

Если кратко, то мы передаём нужное нам название разрешения экрана, ищем его значение среди объявленных ранее в переменной $sizes. После того, как нашли, подставляем его вместе с переданным min или max (переменная $minmax).

Пример использования, включая в другой миксин:

@mixin blocks-width {
  width: 400px;
  @include media("max", "md") {
    width: 100%;
  }
}

С этого простого примера мы получим миксин, меняющий ширину блока на разрешении <768px с 400px на 100%. Следующие примеры должны выдать такой же результат.

Пример использования внутри класса:

.blocks-width {
width: 400px;
  @include media("max", "md") {
    width: 100%;
  }
}

Пример использования в качестве отдельного медиазапроса:

.blocks-width {
width: 400px;
}

@include media("max", "md") {
.blocks-width {
    width: 100%;
}
}

А что, если нужен медиазапрос в том числе и с чётким диапазоном (указать одно разрешение, в пределах которого будет работать медиазапрос)? Расширим немного наш миксин.

Лично мне удобно описывать разрешение следующим образом — если нам нужен диапазон md, то мы берём размеры экрана между sm и md. Если мы хотим переписать миксин таким образом, чтобы мы передавали только одно разрешение, то нам придётся найти предыдущее значение из списка. Так как я не нашла какого-то метода, чтобы это сделать быстро, то пришлось написать функцию:

@function getPreviousSize($currentSize) {
  $keys: map-keys($sizes);
  $index: index($keys, $currentSize)-1;
  $value: map-values($sizes);
  @return nth($value, $index);
}

Чтобы проверить, как она работает, используйте debug:

@debug getPreviousSize('md');

Далее, наш немного переделанный код:

@mixin media($minmax, $media) {
  @each $size, $resolution in $sizes {
    @if $media == $size {
      @if ($minmax != "within") {
        @media only screen and (#{$minmax}-width: $resolution) {
          @content;
        }
      } @else {
        @if (index(map-keys($sizes), $media) > 1) {
          @media only screen and (min-width: getPreviousSize($media)+1) and (max-width: $resolution) {
            @content;
          }
        } @else {
          @media only screen and (max-width: $resolution) {
            @content;
          }
        }
      }
    }
  }
}

Логика такая же, что касается предыдущего функционала. Но, если хотите применить медиазапрос только в диапазоне, например, md, то при вызове миксина напишите следующее:

@include media("within", "md") {
  .blocks-width {
    width: 100%;
  }
}

После чего мы увидим такой скомпилированный css:

@media only screen and (max-width: 768px) and (min-width: 577px)
.blocks-width {
    width: 100%;
}

При этом, если мы укажем самый маленький размер экрана (у нас это xs), например:

@include media("within", "xs") {
  .blocks-width {
    width: 100%;
  }
}

То получим диапазон от 0 до соответствующего наименьшего разрешения:

@media only screen and (max-width: 320px)
.blocks-widthh {
    width: 100%;
}

Естественно, вы можете переписать данные медиазапросы и в другую сторону, но лично я привыкла верстать от большего до меньшего.

Спасибо за внимание!
UPD: немного исправлен миксин, чтобы разрешения в ограниченных диапазонах не пересекались :) Спасибо за внимательность E_STRICT