Group media queries

While the media query bubbling is great:

header {
    color: green;

    @media only screen (max-width: 500px) { color: red; }
}

footer {
    color: green;

    @media only screen (max-width: 500px) { color: red; }
}

Less generates fairly bloated code because it repeats the mediaquery selector each time its declared in the less file:

header {
  color: green;
}
@media only screen (max-width: 500px) {
  header {
    color: red;
  }
}
footer {
  color: green;
}
@media only screen (max-width: 500px) {
  footer {
    color: red;
  }
}

It would be nice if media queries could be grouped if they’re identical:

header {
  color: green;
}
footer {
  color: green;
}

@media only screen (max-width: 500px) {
  header {
    color: red;
  }
  footer {
    color: red;
  }
}

[matthew-dean]

Closing since this is supported by a plugin, and isn’t a priority to move into core (AFAIK - @less/admin correct if this is wrong).

[danielkatz]

IMO it makes sense to generalize the problem to scope grouping control which will provide solution for issue #930