У меня есть класс предметов и компактный класс «модификатор»:

.item { ... }
.item.compact { /* styles to make .item smaller */ }

Это отлично. Тем не менее, я хотел бы добавить@media запрос, который заставляет.item класс должен быть компактным, когда экран достаточно маленький.

При первой же мысли это то, что я пытался сделать:

.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
  .item { @extend .item.compact; }
}

Но это приводит к следующей ошибке:

Вы не можете @ расширять внешний селектор из @media. Вы можете использовать только @extend селекторы в пределах одной директивы.

Как бы я сделал это, используя SASS, не прибегая к стилям копирования / вставки?