Wow! I just found out that you can do this awesomeness with LESS:

Inline Media Queries

header {
  background-color: red;
    @media screen only and (min-width: 20em) {
      background-color: blue;
    }
}

Which when compiled into CSS returns us with this.

header {
  background-color: red;
}

@media screen only and (min-width: 20em) {
  header {
    background-color: blue;
  }
}

Using & to put a class before instead of after

You can use the & after (normally before to combine selector strings) which takes the preceding element and then puts the .ie8 class in front of it. So for example writing this LESS.

header {
  background-color: red;
  .ie8 & {
    background-color: blue;
  }
}

Which gives us this CSS.

header {
  background-color: red;
}
.ie8 header {
  background-color: blue;
}

Why this is cool

This really helps prevent fragmentation of styles. Before learning these techniques, I'd often put IE styles in their own ie.less sheet and media queries in media-queries.less, but with these new techniques, I can keep styles bundled with their other relevant rules.