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

Question

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

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

I want to know if it is possible to group a media query using a selector. It seems to work the way I implemented it, but I thought I'd ask to see if it was possible.

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

I understand that media queries are different from serial selectors, because you have to define your selectors inside a media query, but is there any way of LESS voodoo to perform such a grouping?

Answer 1

I am not 100% sure of the output that you are going to use, but this LESS only determines 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; } } 

This CSS is inferior:

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