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