LESS: Can you group a CSS selector with a media query?

Question

I really enjoyed finding out you could create a media query variable that you can easily reuse and makes your code much more readable.

@tablet: ~"(min-width: 768px) and (max-width: 980px)";
@media @tablet { ... }

I want to know if it's possible to group a media query with a selector. It doesn't appear to work the way I've implemented it, but I thought I'd ask to see if it's even probable.

@tablet: ~"(min-width: 768px) and (max-width: 980px)";
body {
  aside { ... }

  &.homepage,
  @media @tablet {
    aside { ... }
  }
}

I understand that media queries are different from run-of-the-mill selectors because you have to define your selectors inside of the media query, but is there some voodoo LESS way to accomplish grouping like this?

How do you expect to have a selector like this: `body.homepage, @media (min-width: 768px) and (max-width: 980px)`? That's not valid CSS. — cimmanon, Dec 12 '12 at 16:14
I realize that. I don't want to have to duplicate large chunks of CSS that apply to a particular class AND break-point if I can avoid it. — creativetim, Dec 12 '12 at 16:16
Glad to hear it's not impossible! :) Can you elaborate or provide an example of how that might work? — creativetim, Dec 12 '12 at 16:22

score 4 · Accepted Answer · answered Dec 12 '12 at 16:30

I'm not a 100% certain of the output you are going for, but this LESS only defines the color red once, and applies it to both:

@tablet: ~"(min-width: 768px) and (max-width: 980px)";
body {
  aside { color: blue }

  &.homepage {
    aside { color: red }
  }

  @media @tablet {
    .homepage;
  }
}

Yields this CSS:

body aside {
  color: #0000ff;
}
body.homepage aside {
  color: #ff0000;
}
@media (min-width: 768px) and (max-width: 980px) {
  body aside {
    color: #ff0000;
  }
}

LESS: Can you group a CSS selector with a media query?

1 Answers1

Linked