(возможно, на этот вопрос уже был дан ответ - не удалось найти ответ)

Традиционное переопределение запроса @media имеет тенденцию группировать все переопределения для одного размера / носителя в одну группу скобок.

например

.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;
    }
}

В Sass есть действительно отличный способ записать переопределения запросов @media внутри вложенного объявления, например, так:

.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;
  }
}

теперь, когда скомпилировано, sass не группирует блоки запроса @media вместе, поэтому в результате получается что-то вроде этого:

.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;
  }
}

Я использовал эту технику для недавнего проекта, и когда вы применяете этот принцип к гораздо большему проекту, вы в конечном итоге получаете несколько разделов запросов @media, распространяемых по всей вашей css (у меня до сих пор их было около 20).

Мне очень нравится техника sass, поскольку она облегчает отслеживание потока переопределений (а также облегчает перемещение объектов).

Однако мне интересно, есть ли какой-либо недостаток в наличии нескольких разделов @media через CSS, особенно с точки зрения производительности?

Я пробовал chrome css-профилировщик, но не смог увидеть ничего специфического для запросов @media.

(Больше информации о @media in sass на этой странице)