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

css, css-selectors, less, media-queries

Solution

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;
  }
}

Problem

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?

Original source