Директива @media

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

scss
.sidebar {
  width: 300px;

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

.sidebar
  width: 300px

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

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

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

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

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

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

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

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

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

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

Предыдущая страница

Вложенный импорт

Следующая страница

Директива @extend

Ваша 
Поддержка