Как 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*/ } Данный миксин удобно использовать в крупных проектах, его удобно поддерживать и дорабатывать. Например, можно добавить миксины для изменения интерфейса в зависимости от ориентации экранов. Все индивидуально и зависит от конкретных проектов и дизайнов.