Медиазапросы в SCSS: создаем миксин для удобной реализации адаптивного интерфейса

Как UI специалист, я являюсь приверженцем адаптивных интерфейсов и с особой любовью отношусь к адаптивной верстке. С появлением таких технологий, как flex и grid CSS, разрабатывать адаптивную версию веб-приложения становится в разы быстрее и проще. Обеспечить доступность потребления контента через мобильные и планшетные устройства на сегодняшний день является важной задачей каждого веб-разработчика.

На одном из проектов, над которым я работал, был проведен большой редизайн, в том числе были внесены существенные изменения в адаптивную версию веб-приложения. Учитывая, что адаптивность должна была пройти несколько стадий тестирования (с последующей корректировкой), было принято решение создать SCSS миксин, который бы помог в последующем внести изменения в параметры breakpoint’ов один раз для изменения адаптивной верстки во всем приложении сразу. Этим же миксином я и решил поделиться с вами.

В структуре проекта создадим .scss файл, в котором пропишем наш миксин (не забудьте потом подключить созданный .scss файл).

Первым делом создадим переменную, в которую пропишем наши параметры адаптивности. Все они индивидуальны под каждый проект, и, как правило, их определяет команда дизайнеров. Предположим, что в нашем случае их будет 4:

$breakpoints: (
    sm: 576px,
    md: 768px,
    lg: 1024px,
    xl: 1440px,
);

Далее, напишем миксин, в который передадим ключевой параметр разрешения экрана и ищем его значение среди объявленных переменных.

@mixin from($breakpoint) {
    $size: map-get($breakpoints, $breakpoint);
    @if ($size == 0) {
        @content;
    } @else {
        @media screen and (min-width: $size) {
        @content;
        }
    }
}

В SCSS таблице стилей задействовать данный миксин нужно следующим образом:

@include from('md') {
    /*стили для разрешения ОТ 768px*/
}

В некоторых случаях необходимо указывать стили для разрешений ДО определенных значений. В данном случае миксин будет выглядеть следующим образом:

@mixin before($breakpoint) {
    $size: map-get($breakpoints, $breakpoint);

    @if ($size == 0) {
        @content;
    }
    @else {
        @media screen and (max-width: ($size - 1px)) {
            @content;
        }
    }
}

Через математическую функцию мы уменьшаем значение на 1px, чтобы избежать конфликта разных стилей для разрешений ДО и ПОСЛЕ определенных значений. Такие кейсы тоже имеют место быть. Использование в SCSS следующее:

@include before('md') {
    /*стили для разрешения ДО 767px*/
}

Как быть в случае, когда стили нужны для определенных диапозонов экранов? Например, начиная 576px и заканчивая 1024px. Для этих целей существует другой миксин:

@mixin from-to($from, $to) {
    $min: map-get($breakpoints, $from);
    $max: map-get($breakpoints, $to) - 1px;

    @if ($min == 0) {
        @media screen and (max-width: $max) {
        @content;
        }
    } @else {
        @media screen and (min-width: $min) and (max-width: $max) {
        @content;
        }
    }
}

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

@include from-to('md', 'lg') {
    /*стили для разрешения ОТ 768px ДО 1024px*/
}

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

Автор:

Юрий А.

UI специалист

Технологии: