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

Пример простого миксина для медиа-запроса по ширине экрана:

@mixin respond-to($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 600px) {
      @content;
    }
  } @else if $breakpoint == tablet {
    @media (max-width: 900px) {
      @content;
    }
  } @else if $breakpoint == desktop {
    @media (min-width: 901px) {
      @content;
    }
  }
}

// Использование:
.container {
  width: 100%;
  @include respond-to(mobile) {
    width: 90%;
  }
}

Такой подход повышает читаемость и облегчает поддержку кода, позволяя централизованно управлять точками перелома (breakpoints). Можно расширять миксины, добавляя новые условия или параметры для более гибкой настройки.

Расскажи про SCSS миксины для медиа-запросов