CSS Hierarchies + @media queries

I was reading through http://dev.w3.org/csswg/css3-hierarchies/ and noticed
that there was no provision for nesting an @media directive inside a
hierarchical selector context.

In Sass we let @media be nested in any selector and then "bubble" that
@media query to the top level.

For example:

.context {
  & .module {
    float: left;
    width: 50%;
    @media all and (max-device-width: 500px) {
      float: none;
      width: auto;
    }
  }
  & p {
    color: #333;
  }
}

Would be translated to:

.context .module { float: left; width: 50%; }
@media all and (max-device-width: 500px) { .context .module { float: none;
width: auto; } }
.context p { color: #333; }

similarly, selectors are transparent across the @media boundary:

.context {
  @media all and (max-device-width: 500px) {
    & .nested {
      color: red;
    }
  }
}

becomes:

@media all and (max-device-width: 500px) { .context .nested { color: red; }
}

I think it would be great to amend this spec to make @media (and other
at-rules?) valid inside a hierarchical selector context.

Chris Eppstein