When using @media bubbling, @extend requires a local selector

[imathis]

#articles {
  @media only screen and (min-width: 480px) { > article { @extend .foo; } } // works fine
  > article {
    @media only screen and (min-width: 480px) { @extend .foo; } // breaks
  }
}

[chriseppstein]

got some reports on twitter about this too. @nex3 any ideas what's the cause?

[ebiasini]

I'm trying to @extend a markup element inside a "smaller screen" media query, in order to have it inherit different 960.gs container_xx properties. It seems I'm not able to achieve this...

[travi]

I'm not sure that this is directly related, but I think it is related enough not to create a new issue for it. When I attempt to use extend inside an @media block, the generated sheet has the rule outside of the block causing it to be applied under the wrong @media query conditions.

[chriseppstein]

Inheritance is global. If you want to scope your styles you have to inherit from a class in a media block -- not the other way around.

[nex3]

This is a tricky one. @imathis, in your example, the line you say works fine doesn't actually do what it seems like it should. For example:

#articles {
  @media only screen and (min-width: 480px) { > article { @extend .foo; } } // works fine
}

.foo { a: b; }

compiles to

.foo, #articles > article { a: b; }

with no @media in sight. When it comes down to it, this is probably correct. The alternative is the following:

.foo { a: b; }
@media only screen and (min-width: 480px) { #articles > article { a: b; } }

which doesn't uphold @extend's guarantee of not duplicating classes.

Since any use of @extend within @media or other directives behaves in this unintuitive manner, I'm tempted to disallow it wholesale. @chriseppstein, what do you think?

[chriseppstein]

@nex3, It's very natural to want to use @extend within an @media block. But since @extend is a compile time directive and @media is a runtime directive, having it allowed only causes confusion. I'm +1 on disallowing it.

[nex3]

Yeah, this is definitely one of those times where what we really want is browser-based @extend. I'll change the title to reflect the new plan.

Edit: Actually I'll just open a fresh issue.

[nex3]

Fresh issue opened as #154. Closing this one.