У меня есть класс элемента и компактный класс "модификатор":
.item { ... }
.item.compact { /* styles to make .item smaller */ }
Это нормально. Тем не менее, я хотел бы добавить запрос @media
, который заставляет класс .item
быть компактным, когда экран достаточно мал.
Сперва подумайте, вот что я пытался сделать:
.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
.item { @extend .item.compact; }
}
Но это порождает следующую ошибку:
Вы не можете @расширить внешний селектор из @media. Вы можете только @extend селекторов в рамках одной и той же директивы.
Как я могу выполнить это, используя SASS, не прибегая к стилям копирования/вставки?