Re: CSS Hierarchies + @media queries

Great. Our users really enjoy this feature =)

chris

On Wed, Feb 29, 2012 at 3:54 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Wed, Feb 29, 2012 at 3:42 PM, Chris Eppstein <chris@eppsteins.net>
> wrote:
> > I was reading through http://dev.w3.org/csswg/css3-hierarchies/ and
> noticed
> > that there was no provision for nesting an @media directive inside a
> > hierarchical selector context.
> >
> > In Sass we let @media be nested in any selector and then "bubble" that
> > @media query to the top level.
> >
> > For example:
> >
> > .context {
> >   & .module {
> >     float: left;
> >     width: 50%;
> >     @media all and (max-device-width: 500px) {
> >       float: none;
> >       width: auto;
> >     }
> >   }
> >   & p {
> >     color: #333;
> >   }
> > }
> >
> > Would be translated to:
> >
> > .context .module { float: left; width: 50%; }
> > @media all and (max-device-width: 500px) { .context .module { float:
> none;
> > width: auto; } }
> > .context p { color: #333; }
> >
> > similarly, selectors are transparent across the @media boundary:
> >
> > .context {
> >   @media all and (max-device-width: 500px) {
> >     & .nested {
> >       color: red;
> >     }
> >   }
> > }
> >
> > becomes:
> >
> > @media all and (max-device-width: 500px) { .context .nested { color:
> red; }
> > }
> >
> > I think it would be great to amend this spec to make @media (and other
> > at-rules?) valid inside a hierarchical selector context.
>
> Presumably all the at-rules defined in CSS Conditionals would be useful.
>
> Allowing a ruleset and allowing an at-rule are basically the same,
> once you've committed to changing the grammar.  It would be pretty
> weird if you could nest rulesets in at-rules (like you can now),
> at-rules in at-rules (like Conditionals allows), rulesets in rulesets
> (like Hierarchies allows), but not at-rules in rulesets.
>
> This would also require the grammar of those at-rules to accept
> declarations instead of just rulesets, when they're nested inside of a
> ruleset already.  Otherwise you'd be forced to nest an additional
> "&{...}" in there.
>
> Overall, I approve.
>
> ~TJ
>