Re: DRYing up media queries

Instead of being media-specific, it could be a type of variables that are
more sass-like and replaced at parse time instead of run-time.

Chris


On Sun, May 26, 2013 at 6:58 PM, L. David Baron <dbaron@dbaron.org> wrote:

> On Saturday 2013-05-25 23:03 +0200, Yoav Weiss wrote:
> > OK, I'm convinced that doing that in CSS is probably a bad idea.
> > Would you consider an HTML based syntax to address this use-case better?
> Is
> > such a syntax within the scope of the CSSWG? HTMLWG? Both?
>
> I think it could still be within CSS (and probably should be if we
> supported the feature).  It just shouldn't be in the part of CSS that
> involves selectors and declarations.
>
> It could, for example, be done with a type of variables that are
> specific to @media rules and apply to the whole style sheet, rather
> than inheriting variables that apply to elements.
>
> -David
>
> > On Sat, May 25, 2013 at 4:31 AM, Simon Sapin <simon.sapin@exyr.org>
> wrote:
> >
> > > Le 25/05/2013 09:30, Tab Atkins Jr. a écrit :
> > >
> > >  We could possibly say that properties defined on the root element are
> > >> accessible across the stylesheet, but that might be weird.
> > >>
> > >
> > > In addition to being weird, we’d have to find some way to break the
> > > definition cycle that usually prevented by this part of
> css3-mediaqueries:
> > >
> > >  To avoid circular dependencies, it is never necessary to apply the
> > >> style sheet in order to evaluate expressions. For example, the aspect
> > >> ratio of a printed document may be influenced by a style sheet, but
> > >> expressions involving ‘device-aspect-ratio’ will be based on the
> > >> default aspect ratio of the user agent.
> > >>
> > >
> > > For example, how would this work?
> > >
> > > :root { var-my-query: (min-width: 600px) }
> > > @media var(my-query) {
> > >    :root { var-my-query: (max-width: 600px) }
> > > }
>
> --
> 𝄞   L. David Baron                         http://dbaron.org/   𝄂
> 𝄢   Mozilla                           http://www.mozilla.org/   𝄂
>
>