@media queries should behave like nested rules

[tylertate]

I've been working closely with @media queries for a new version of the 1KB CSS Grid that will be written in LESS.js, but I have noticed two crucial inconsistencies in how @media queries are currently being handled:

You shouldn't need to define a selector within a media query, but should be able to specify CSS attributes directly. For instance:

header {
    width: 50%;

    @media (max-width: 720px) {
        width: 100%;
    }
}

Secondly, @media queries in LESS.js should be aware of their position within other nested rules. For example:

article {
    header {
        width: 50%;

        @media (max-width: 720px) {
            &:hover {
                width: 100%;
            }
        }
    }
}

Should result in:

article header:hover { width: 100%; }

But unfortunately, it currently results in:

header:hover { width: 100%; }

I am more than happy to be a champion for @media query support in LESS, so please let me know if there's anything else I can do to help!

[cloudhead]

I'm not sure I follow, you can specify attributes directly:

 @media (max-width: 720px) { width: 100% }

results in in the exact same CSS.

Regarding your 2nd point, you aren't supposed to put @media queries inside other elements, because it would lead to invalid css, ie:

header { @media {} }

would result in:

header @media {}

which is invalid.

[tylertate]

When using @media queries, you could NOT normally write this (because there is no selector):

@media (max-width: 720px) {
    width: 100%;
}

Instead, you would have to write:

@media (max-width: 720px) {
    header {
        width: 100%;
    }
}

What I'm calling for is that LESS.js be smart about how it handles @media queries. Following the normal rules, yes, this would result in invalid syntax:

header { @media { width: 100%; } }

But what I'm suggesting is that LESS.js know to handle @media queries differently from other selectors so that the above would actually compile as:

@media {
    header {
        width: 100%;
    }
}

This would make @media queries much easier to work with. At the moment, they conflict with LESS's principle of nested selectors, but this new behavior would be revolutionary in terms of making fluid layouts really easy to create.

[jacobrask]

Sass does it this way, and it works pretty well.

[cloudhead]

gotcha, will look into it.

[dmackerman]

Yes, SASS does this and it's fantastic.

[davesimon]

Consider this another "me too" on this one. SASS calls it "@media Bubbling."

Here's the case I'm thinking of:

.selector {
    p {
        font-size: 12px;
    }
}

Obviously, that produces:

.selector p { font-size: 12px; }

But if I want to change the font size of .selector p when we reach a particular width, I currently do:

.selector {
    p {
        font-size: 12px;
    }
}

@media (min-width: 1200px) {
    .selector {
        p {
            font-size: 14px;
        }
   }
}

This produces a lot of repeated CSS and puts selectors in different parts of the document and is, in general, not very DRY. It's a maintenance headache waiting to happen.

What I'd like to be able to do is this:

.selector {
    p {
        font-size: 12px;
        @media (min-width: 1200px) {
            font-size: 14px;
        }
    }
}

It's similar to using "&" combinator in a nested rule. Both of the last two code blocks would compile to:

.selector p { font-size: 12px; }
@media (min-width: 1200px) { .selector p { font-size: 14px; } }

[lukeapage]

this is implemented in less now I believe.