css - 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. However, I'd like to add a @media query that forces the .item class to be compact when the screen is small enough.

On first thought, this is what I tried to do:

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

But this generates the following error:

You may not @extend an outer selector from within @media. You may only @extend selectors within the same directive.

How would I accomplish this using SASS without having to resort to copy/pasting styles?

Answer 1

The simple answer is: you can't because Sass can't (or won't) compose the selector for it. You can't be inside of a media query and extend something that's outside of a media query. It certainly would be nice if it would simply take a copy of it instead of trying to compose the selectors. But it doesn't so you can't.

Use a mixin

If you have a case where you're going to be reusing a block of code inside and outside of media queries and still want it to be able to extend it, then write both a mixin and an extend class:

@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 30em) {
    .bar {
        @include foo;
    }
}

Extend the selector within a media query from the outside

This won't really help your use case, but it is another option:

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}

Wait until Sass lifts this restriction (or patch it yourself)

There are a number of ongoing discussions regarding this issue (please don't contribute to these threads unless you have something meaningful to add: the maintainers are already aware that users desire this functionality, it's just a question of how to implement it and what the syntax should be).

• https://github.com/sass/sass/issues/1050
• https://github.com/sass/sass/issues/456