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

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

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

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

$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