Mam klasę przedmiotów i kompaktową klasę „modyfikatora”:

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

To jest w porządku. Chciałbym jednak dodać@media zapytanie wymuszające.item klasa jest zwarta, gdy ekran jest wystarczająco mały.

Na pierwszy rzut oka starałem się to zrobić:

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

Ale generuje to następujący błąd:

Nie możesz wysyłać zewnętrznego selektora z @media. Możesz wysyłać tylko selektory w ramach tej samej dyrektywy.

Jak mogę to osiągnąć za pomocą SASS bez konieczności uciekania się do stylów kopiowania / wklejania?