Re: [css-variables][mediaqueries] Allow var() in media queries?

Glen,
in your first message I didn't understand what would happen when @initial
were not used, if existing. That is, if @initial were implemented, then
variables shouldn't be specified in :root but in @initial, should they?
My idea is to propose something like a CSS scope (in the sense of
Javascript scope, of course) so that variable values (both var() and, e.g.,
@viewport) cannot escape their @media reference block and therefore do not
participate in condition definition for their scope itself (I also sent a
proposal in that sense).
I hope someone solves this, because I guess there's another proposal _en
route_ about variables and "classes" which would probably benefit from a
stricter definition of separate "instruction blocks".
Andrea

2015-04-08 12:30 GMT+02:00 Glen Huang <curvedmark@gmail.com>:

> @custom-media mitigates the duplication issue, but still not perfect in
> case like this:
>
> :root {
>         --horizontal-nav-width: 600px;
> }
>
> @custom-media --horizontal-nav-fits (width >= var(--horizontal-nav-width))
> @media (--horizontal-nav-fits) {
>         .nav {
>                 width: var(--horizontal-nav-width);
>                 margin: 0 auto;
>         }
> }
>
> In this case, I design the media query specifically for the navigation. So
> it would be great if I can reuse the dimension in media query. Otherwise I
> have at least two places to edit when, for example, the number of
> navigation links change, and the allowed width is changed.
>
> The recursion problem can be solved either as mentioned by Andrea
> (variables used in media query aren't live, they only resolve to the custom
> properties of the top level :root rule), or as mentioned by me (variables
> used in media query resolve to the custom properties of an at-rule that
> can’t be specified in a media at-rule).
>
> Not sure if these two approaches are feasible.
>
> > On Apr 8, 2015, at 8:30 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> >
> > On Sat, Apr 4, 2015 at 12:59 AM, Glen Huang <curvedmark@gmail.com>
> wrote:
> >> Does this do what I think it does?
> >>
> >> ```css
> >> :root {
> >>        --page-width: 768px;
> >> }
> >> @media (min-width: var(--page-width)) {}
> >> ```
> >>
> >> If not, is it because media queries don’t inherit properties from the
> :root element? If that’s the case, can we add a selector to select a
> special element that the :root element and media queries will all inherit
> from?
> >>
> >> When you design the media query break points according to certain
> element dimensions, being able to use variables in media queries can be
> very helpful.
> >
> > The var() function, when used on an element, just replaces itself with
> > the value of the given custom property on the same element.  @media
> > rules aren't referring to any element, so they don't have any
> > properties at all, let alone custom properties.
> >
> > You could let it refer to the value of the custom properties on the
> > root, as you suggest, but as Cameron says, it makes it way too easy to
> > get into bad loop situations.
> >
> > What you want are just Custom Media Queries
> > <http://dev.w3.org/csswg/mediaqueries/#custom-mq>.  That way you could
> > define something like:
> >
> > @custom-media --large-page (width >= 768px);
> > @custom-media --small-page (width < 768px);
> > @media (--large-page) { ... }
> >
> > ~TJ
>
>
>