DRYing up media queries

Media queries are very common, both in their CSS form and as a `media`
attribute. RWD often results in media query break points repeated in
various places in the code.

In CSS, authors have been using preprocessors to DRY up media queries from
the code, place them in a single location and give them meaninful names [3]
[4]

In HTML, the media attribute can be used with <link rel=stylesheet> and
with <source> tags.
There are a few new proposals that rely on the media attribute [1][2] (I'm
involved with both). Considering RWD's reliance on media queries, there may
be more to come.

Therefore, authors need to DRY up the actual media queries from markup and
CSS, and give them short and meaningful names. That need is likely to
increase over time, with RWD becoming more and more popular and with an
ever-increasing device variance. Having a standard way to do that will ease
code readability and authoring, and will result in slightly smaller files.

At least one proposal have been made to address this issue [5], but perhaps
this issue can be addressed in CSS, in a way similiar to CSS variables.

If CSS variables were applicable to media query values, this could have
resolved that issue, using a syntax such as:

    :root{
        var-wide: screen;
     }
    @media var(wide) {
        /* Applicable style */
     }
and
     <link href="wide.css" rel="stylesheet" media="var(wide)">

Can variables be extended to cover this use-case as well? Or would it
require a separate specification?

Thanks!

[1] http://picture.responsiveimages.org
[2] http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2013-May/039588.html
[3] http://css-tricks.com/naming-media-queries/
[4]
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
[5] http://2002-2012.mattwilcox.net/archive/entry/id/1091/