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;
}
}
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.