Added @media bubbling/nesting/merging (similar to SASS)

[mrcljx]

Also mentioned in #286 and #152. It would be nice if the following conversion could be made by Less:

#a {
  @media screen { ... }
}

@media screen {
  #a { ... }
}

This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet (quoted from SASS reference).

In 936ab7d I separated Media from Directive and added an algorithm which merges media-queries (also similar to SASS).

@media a, b and c {
  @media x, y { ... }
}

@media a and x, b and c and x, a and y, b and c and y { ... }

Note: A nested media-query will always be forced after the top-level media-query. In the following example the header AND the footer will be black iff a and b.

@media a {
   footer { color: white; }

  @media b {
    header { color: black }
    footer { color: black; }
  }

  header { color: white; }
}

[joeldrapper]

@sirlantis That looks really useful. I'm looking forward to using this.

[mrcljx]

Updated pull-request description to include infos on the last two commits (which add media-query condition merging).

[mrcljx]

Note: Using nested @media in mixins doesn't work correctly right now. Taking a look into that tomorrow.

[cloudhead]

Very cool.

[alexpeattie]

+1, very useful