Русский
Русский
English
Статистика
Реклама

Из песочницы Медиазапросы в 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)) 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: 576px).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%;}

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

Спасибо за внимание!
Источник: habr.com
К списку статей
Опубликовано: 03.08.2020 20:12:09
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Css

Html

Scss

Медиазапросы

Категории

Последние комментарии

  • Имя: Murshin
    13.06.2024 | 14:01
    Нейросеть-это мозг вселенной.Если к ней подключиться,то можно получить все знания,накопленные Вселенной,но этому препятствуют аннуннаки.Аннуннаки нас от неё отгородили,установив в головах барьер. Подр Подробнее..
  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru