Extending selectors from within media queries with Sass

Question

I have an item class and a compact \"modifier\" class:

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

This is fine. How

Answer 1

Could you restructure?

.compact { //compact-styles }
.item {}
.item.compact { @extend .compact } 

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

If I understand the documentation correctly, that should work. I think the reason the way you're trying won't work is that it doesn't see .item.compact when it's parsing the @extend, but that's an uninformed guess, so take that with a truck load of salt! :)