Is it possible to nest media queries within media queries?

Question

Is this possible? It seems like a neat solution to me, but I'm not sure if it will work.

@media only screen  and (min-device-width : 320px)  and (max-device-width : 480px) {      /* Code for both portrait and landscape */      @media (orientation:portrait) {          /* Code for just portrait */      }      @media (orientation:landscape) {          /* Code for just landscape */      }  } 

Answer 1

You should be able to nest @media rules this way in CSS3, but it isn't yet supported by most browsers. See this answer for details.

You would have to fully expand and repeat the top-level media queries for the inner rules for it to work across browsers (and I imagine the SCSS processor would generate something similar):

@media only screen  and (min-device-width: 320px)  and (max-device-width: 480px) {     /* Code for both portrait and landscape */ }  @media only screen  and (min-device-width: 320px)  and (max-device-width: 480px)  and (orientation: portrait) {      /* Code for just portrait */  }  @media only screen  and (min-device-width: 320px)  and (max-device-width: 480px)  and (orientation: landscape) {      /* Code for just landscape */  } 

Answer 2

If you wanted to do this the best way is to use the high level media query in a link tag, and then the other queries inside the linked sheet.

In practice though most people cascade their CSS rules from a base sheet that covers the common stuff and then putting changes to that in each media rule-set.