MENU


at root

You can use the @at-root directive to bring a nested selector out to the document root.
You may choose whether to move out of the nesting directive (such as @media) as well.
@media print {
  div {
     .page {
       width: 8in;
       @at-root .a {height: 4in;}
       @at-root {
          .b {height: 5in;}        
          .c {height: 6in;}        
       }
       @at-root (with: media) { color: green; }
       @at-root (without: media) { color: red; }
     }
   }
}

@media print {
  div .page {
    width: 8in;
  }
  .a {
    height: 4in;
  }
  .b {
    height: 5in;
  }

  .c {
    height: 6in;
  }
  color: green;
}
div .page {
  color: red;
}