(isso pode ter sido respondido já - não consegui encontrar a resposta)

A sobreposição de consulta @media tradicional tende a agrupar toda a substituição para um tamanho / meio sob o mesmo grupo de colchetes.

por exemplo.

.profile-pic {
    width:600px;
}
.biography {
    font-size: 2em;
}

@media screen and (max-width: 320px) {
    .profile-pic {
        width: 100px;
        float: none;
    }
    .biography {
        font-size: 1.5em;
    }
}

No Sass, há uma maneira realmente bacana de escrever substituições de consulta @media dentro da declaração aninhada, da seguinte forma:

.profile-pic {
width:600px;
  @media screen and (max-width: 320px) {
    width: 100px;
    float: none;
  }
}

.biography {
    font-size: 2em;
  @media screen and (max-width: 320px) {
    font-size: 1.5em;
  }
}

agora, quando compilado, sass não agrupa os blocos de consulta @media juntos, então a saída acaba sendo algo assim:

.profile-pic {
    width:600px;
}
@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none;
  }
}

.biography {
    font-size: 2em;
}
@media screen and (max-width: 320px) {
  .biography {
    font-size: 1.5em;
  }
}

Eu usei essa técnica para um projeto recente e quando você aplica esse princípio a um projeto muito maior, você acaba com várias seções de consulta @media disseminadas por todo o seu css (eu tenho 20 até agora).

Eu gosto muito da técnica do sass, pois torna mais fácil acompanhar o fluxo de substituições (e também facilita a movimentação das coisas).

No entanto, eu estou querendo saber se existe alguma desvantagem em ter seção @media múltipla através do CSS, particularmente desempenho sábio?

Eu tentei o criador de perfil css do chrome, mas não consegui ver nada específico para as consultas @media.

(Mais informações sobre @media em sass nesta página)