🤟 Алоха фром хелл, друзья! 🤟
Что-то я совсем надолго пропал. Все благодаря любимой работе, на которой, как всегда, ни охнуть, ни вздохнуть. 😅
Все современные сайты и веб-приложения умеют адаптироваться под разные размеры экранов. 📱💻
Каждый разработчик сам для себя решает, как ему удобнее и проще реализовать стили для адаптива. 🤔
Вот показываю вам свой вариант. С первых строчек мы видим прикольчики SCSS. 🎨
Использую @use. Почему не @ import? Sass потихоньку выпиливают @ import. ❌
Если Sass видит @use, он импортирует нужный файл один раз и использует в других местах только его. Импорт, в свою очередь, каждый раз импортирует, и получается лишний код, а размер бандла от этого больше. 📦
Интересно, какого х*я не сделали так раньше? 🤷‍♂️ Хотя кто я такой, чтобы об этом рассуждать?
Думаю, там точно не дураки сидят. 🧠
В следующий раз посмотрим, что такое sass:map
и sass:list

🤟 Алоха фром хелл, друзья! 🤟
Продолжаем смотреть что я понаписал в файлике адаптивности.
На данный момент нас интересуют sass:map и sass:list. Это стандартные модули, которые идут из коробки.

sass:map - позволяет работать с объектами ключ значение

// получить значение поля tablet из объекта $breakpoints
map.get($breakpoints, ‘tablet’)

sass:list - позволяет работать с массивоподобными объектами

// получить значение первый элемент из массива (0, 758px)
list.nth((0, 768px), 1)

Теперь разберем, что написано у меня

$breakpoints: (
  mobile: (
    0,
    768px
  ),
  tablet: (
    769px,
    1365px
  ),
  desktop: (
    1366px,
    20000px
  )
);

Map объект, где ключ это название устройства, а значение - массив из минимального и максимального разрешения

@mixin mediaQuery($mediaType) {
  @media screen and (min-width: list.nth(map.get($breakpoints, $mediaType), 1)) and (max-width: list.nth(map.get($breakpoints, $mediaType), 2)) {
    @content;
  }
}

Миксин, принимающий тип устройства. Создает медиа запрос. Минимальное значение - берем из объекта $breakpoints по ключу $mediaType c помощью map.get и сразу же из этого значения получаем первый элемент через list:nth. По похожей схеме получаем максимальное значение, только берем уже второй элемент.

Ключевое слово @content вставлет то, что мы напишем внутри миксина

Пример использования

@include mediaQuery(‘tablet’) {
    font-size: 40px;
}

При разрешении от 769px до 1365px размер шрифта равен 40px;

Ставь ❤️, если было полезно

🤟 Алоха фром хелл, друзья! 🤟
К сожалению, я опять пропал на долгое время( Основная моя работа отнимает много времени и сил. Как только появляется свободное время, стараюсь делать контент для канала. Вот и сегодня удалось урвать немного времени.

Все проекты с чего-то начинаются. И, как мне кажется, любой фронтенд-проект начинается с кнопки. Так вот и я вам хочу показать свой компонент кнопки.

Как видите, разработку компонентов я веду через Storybook. Он позволяет изолировано разрабатывать компоненты и заставляет писать их «глупыми».

Что такое «глупый» компонент? По названию может показаться, что это тестировщик в твоей конторе, который не понимает процесс и логику работы тестируемого приложения, но нет. «Глупый» он потому, что не содержит в себе никакой бизнес-логики, а занимается лишь представлением переданных ему пропсов. Так вот в Storybook не получится написать историю без танцев с бубном, если внутри этого компонента есть, например, асинхронные запросы или зависимость от других состояний системы.

В следующий раз покажу сам код и разберем, что за говнокод я там написал. Надолго не должен пропасть. Спасибо всем, кто еще тут держится, и за поддержку.
Here we go! ❤️