`@extends` inside `@media` query doesn't extend rule outside query

Which makes sense, because how exactly in the CSS would this work anyway?

But still, perhaps in edge cases like this, there could be a ‘fake’ extends, where instead of cleverly applying another selector onto the rule that’s being extended (current behaviour), it could dump the contents of the one into the other. Ugly, and it bloats the CSS, but as we would have to do the bloating ourselves, maybe it’s forgivable.

Here’s a (real life) use case:

.alpha, .beta, .gamma {
    font-weight: bold;
}
.beta {
    color: #F00;
}

@media only screen and (max-width: 60em) {
    .caption {
        @extend .beta;
    }
}

Presently, of course, CSS doesn’t allow selectors like this:

.alpha, @media only screen and (max-width: 60em) .caption {
    font-weight: bold;
    color: #f00;
}

So the .caption body is empty. With the above suggestion, Stylus might produce something like this instead:

.alpha, .beta, .gamma {
    font-weight: bold;
}
.beta {
    color: #F00;
}

@media only screen and (max-width: 60em) {
    .caption {
        font-weight: bold;
        color: #f00;
    }
}

Yes, rules are duplicated so the output is bloated, but it gives us a convenient way to extend classes into media queries. And if the HTTP server is gzipping CSS files like it should, the issue of bloat should be minimized.

I do realise that I can get something similar with functions, which do create duplicate code in every definition they’re run inside – and therefore they’re permitted inside @media queries. But having @extend intelligently recognise whether it’s inside a @media query seems tidier to me, because in the above example I’d have to create the functions alphabetagamma and beta. Could get quite confusing!

As a corollary, perhaps this modification of @extends could make it work inside of function bodies as well.

No idea what the codebase is like, and whether this would involve a pile of refactoring, so take this suggestion as you will 😃

[pdaoust]

I’m starting to change my mind about this issue; for prior art, SASS has explicitly chosen not to support this due to dangers of stylesheet bloat (every @extended rule being duplicated in every media query that needs it). Take a look: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#_in_directives

So I no longer think it’s necessary or advisable, but if a clever solution to this problem could be worked out – or perhaps if it were implemented, but the documentation included a caveat about bloat – then that might be okay.

[shirohana]

face to it again in 2021, here’s my solution:

Failed:

$text-normal
  font-size: 16px

@media (min-width: 768px)
  .text
    @extends $text-normal

>>>
.text {
  font-size: 16px;
}

Succeed:

$text-normal = @block {
  font-size: 16px
}

@media (min-width: 768px)
  .text
    {$text-normal}

>>>
@media (min-width: 768px) {
  .text {
    font-size: 16px;
  }
}