Media query bubbling and html class

[ChrisButterworth]

Been trying to figure this out for a while but how would I get something like this to work:

header{
        background:blue;
        @media screen and (min-width:1200), html.lt-ie9 &{
                background:red;
        }
}

Trying to do it this way to target desktop and IE versions below IE9; any help would be brilliant, otherwise I'd end up repeating myself over and over to get something done.

[seven-phases-max]

header {
    background: blue;

    .desktop-and-old-ie() {
        background: red;
    }

    @media screen and (min-width: 1200) {.desktop-and-old-ie}
    html.lt-ie9 &                       {.desktop-and-old-ie}
}

In short, selectors and media queries can't be combined together since they are very different beasts, so mixins are your friends...

[ChrisButterworth]

That's great, thanks.

Do you think it'd be a feature added in the future? It solves the problem now but I can see cases where there would be hundreds of mixins...

[lukeapage]

Yes!

How about this...

This is using a feature that should be merged into master and released in 1.7 in the next couple of weeks.

.desktop-and-old-ie(@rules) {
      @media screen and (min-width: 1200) { @rules(); }
      html.lt-ie9 &                       { @rules(); }
}

header {
    background: blue;

    .desktop-and-old-ie({
        background: red;
    });
}

[lukeapage]

So the .desktop-and-old-ie mixin describes the wrap and then you use that to abstract out the fact it is both a media query and a class.

[lukeapage]

and added a test case for this

https://github.com/less/less.js/pull/1859/files#diff-d18acf5d1b39dcf0c1635dd08a77c71fR22

[seven-phases-max]

Btw., nice #1859 example. I did not notice that this use-case is exactly what #965 started with :)

[ChrisButterworth]

That's great, and a great example, thanks a lot.