Media queries no Sass

Media queries podem ser aninhadas em outras regras de CSS. Se isso acontece, a media query é movida para o top level (no sentido de aninhamento) da folha de estilo do CSS, colocando todas as regras que contém a media query dentro dela. Exemplo:

aside nav {
  width: 25%;
  @media screen and (min-width:320px) {
    width: 100%;
  }
  @media screen and (min-width:768px) {
    width: 50%;
  }
}

aside nav {
  width: 25%; }
  @media screen and (min-width: 320px) {
    aside nav {
      width: 100%; } }
  @media screen and (min-width: 768px) {
    aside nav {
      width: 50%; } }

Essa abordagem é muito mais simples e clara do que ter que ficar repetindo as regras para cada media query.

Também dá pra aninhar media queries umas dentro das outras. O exemplo anterior poderia ter sido escrito assim:

aside nav {
  width: 25%;
  @media screen {
    @media (min-width:320px) {
      width: 100%;
    }
    @media (min-width:768px) {
      width: 50%;
    }
  }
}

A saída é a mesma do exemplo anterior.