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

Closed
imathis opened this Issue Jun 3, 2011 · 8 comments

5 participants

@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
Sass member

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
Sass member

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
Sass member

@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.

@nex3 nex3 closed this Aug 10, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment