Изменение значения gap в зависимости от ширины экрана (адаптив) через миксины?

Question

[Miron4ek_228]

На одном из марафонов по вёрстке заметил такую деталь. Этот миксин динамически меняет значение gap в зависимости от ширины экрана: например если больше 1170 - 60px, а при самой маленькой ширине (например 320) gap 20px.

Здесь не используются медиа-запросы, просто "резинится".
Я впервые столкнулся с такой записью и введу скудных познаний в работе миксинов, хотелось бы узнать как это работает в данном случае.

Comments

[Ankhena]

Почитайте про clamp https://developer.mozilla.org/ru/docs/Web/CSS/clamp
К этому миксину не имеет отношения, но вам понравится.

Answer 1

[Максим Морев]

Здесь используются медиа-запросы, просто реализация скрыта за миксином.
Вы всегда можете посмотреть в результирующем CSS, во что этот миксин разворачивается.

Сам миксин почти наверняка выглядит как-то так и разворачивается примерно вот в такое:

@media (min-width: 320px) {
  gap: calc(20px + 40 * (100vw - 320px) / 850);
}

@media (min-width: 1170px) {
  gap: 60px;
}