Директива @media
Директива @media
работает так же, как и стандартное правило CSS, только с дополнительными возможностями:
директива может вкладываться в правила CSS. Если директива вложена в css-правило, то при компиляции она будет
поднята наверх таблицы стилей, а все селекторы в которых была директива переместятся внутрь @media
. Такой метод
позволяет легко добавлять правила в @media
без повторения селекторов или нарушения потока таблицы стилей. Например:
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
.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
.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
$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;
}
}
Поддержка