Re: CSS Hierarchies + @media queries

Well a lot of these things in Sass really pay off in how the different
features interact with each other. In particular, nested media and
selectors really shine in combination with mixins.

But even without mixins, a hierarchical selector establishes a conceptual
context. To break our of that context to make a responsive tweak is to that
context is a major break from the mindset of the code flow.

Happy to provide Sass code examples from the community or testimonials if
you're interested.

Chris

On Wed, Feb 29, 2012 at 4:35 PM, L. David Baron <dbaron@dbaron.org> wrote:

> On Wednesday 2012-02-29 15:42 -0800, Chris Eppstein 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;
> >   }
> > }
>
> Just because we could have another way to write something doesn't
> mean we should.  We risk turning the language into perl, i.e., into
> a language where there are ten ways to express the same thing and
> thus nobody can read what anybody else writes.
>
> I think it's a lot of extra work to implement and it doesn't look
> like it adds much value.
>
> -David
>
> --
> 𝄞   L. David Baron                         http://dbaron.org/   𝄂
> 𝄢   Mozilla                           http://www.mozilla.org/   𝄂
>
>