CODEWITHSUNDEEP
cssinternet-explorer-8lessmedia-queries
Stefanie
Stefanie

Reputation: 310

LESS: render content of a media query in class (fallback)

do you know if there is a way to render the exact same content of a media query into a class in LESS?

To explain my case: I'm doing mobile first and trying to avoid overrides with media queries. Unfortunately this ends up excluding ie8 and below since most of the styles for desktop are into a media query. I'm serving only the desktop page to IE8 (fixed width).

So at the end of the day I would like to combine this:

@media (min-width: 769px) {
    color: red;
}
.ie8 & {
    color: red;
}

Chaining it with comma doesn't work since it's not valid (@media (min-width: 769px),.ie8 {}). In Sass I can achieve this over a mixin with @content. But I wasn't able to do this in LESS.

Does anyone has a workaround how to do this in LESS? Somehow with a loop maybe?

Upvotes: 1

Views: 270

Answers (1)

Luca Detomi
Luca Detomi

Reputation: 5716

I had the same question and after a suggestion about detached ruleset, I developed a possible solution explained here in details.

Major PROs of this are the following:

  • Possibility to set a custom value of screen width for media query,
  • Pass MIN/MAX value of property used in media query (Try to pass "max" instead of "min" calling .MEDIAQUERY mixin)
  • Toggling generation of simple media query or media query + descendant selector, through @only-media boolean.

Upvotes: 1

Related Questions