Html: Миксин для адаптивной вёрстки

SASS: Программирование 8 сообщений
Обновлено: 19 февр., 23:20
231
Студент
84%
Завершения

При использовании SASS или любого другого препроцессора всегда хочется облегчить себе жизнь. Особенно, если речь идёт о создании адаптивной вёрстки. Постоянное использование @media и указание селекторов внутри — мучительно долго. К тому же возникает проблема постоянного перехода от одной точки остановки до другой.

Чтобы избежать этих проблем можно создать специальный миксин, который поможет уменьшить количество SASS кода и облегчит его чтение.

Создайте миксин media, принимающий следующие аргументы:

  • Текстовое обозначение точки остановки. Таких точек в текущем задании четыре: small, medium, large, custom. По умолчанию выбирается значение small.
  • Максимальную ширину точки остановки. Она используется, если указан тип точки остановки custom.

Пример работы

$breakpoints: (
  breakpoint-small: 768px,
  breakpoint-medium: 992px,
  breakpoint-large: 1200px
);

.card {
  width: 25%;

  @include media(large) {
    width: 33%;
  }

  @include media(medium) {
    width: 50%;
  }

  @include media(small) {
    width: 100%;
  }

  @include media(custom, 300px) {
    display: none;
  }
}

После компиляции получится следующий CSS код:

.card {
  width: 25%;
}

@media screen and (max-width: 1200px) {
  .card {
    width: 33%;
  }
}

@media screen and (max-width: 992px) {
  .card {
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  .card {
    width: 100%;
  }
}

@media screen and (max-width: 300px) {
  .card {
    display: none;
  }
}

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов