Директива @media работает также как и стандартное правило CSS, только с дополнительными возможностями: директива может вкладываться в правила CSS. Если директива вложена в css-правило, то при компиляции она будет поднята наверх таблицы стилей, а все селекторы в которых была директива переместятся внутрь @media. Такой метод позволяет легко добавлять правила в @media без повторения селекторов или нарушения потока таблицы стилей. Например:

.sidebar {
width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

компилируется в

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media запросы могут вкладываться друг в друга. После компиляции эти @media будут объеденены оператором and.

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

компилируется в

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

Ну и наконец, @media запросы могут содержать в себе все возможности SassScript (включая переменные, функции и операторы) в именах компонентов и различных значений. Например:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

компилируется в

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter. Также отправить оповещение об ошибке можно, нажав на эту ссылку.