Re: CSS Hierarchies + @media queries

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

Received on Wednesday, 29 February 2012 23:55:15 UTC