# Директива @media в SASS

В SASS директива `@media` применяется также как и соответствующее правило в CSS. И также ее можно вложить непосредственно во все правила CSS. Следует отметить, что в случае, когда мы вкладываем директиву `@media` в CSS-правило, после компиляции она поднимается вверх над таблицами стилей, а селекторы, в которых размещалась директива перемещаются внутрь `@media`. Исходя из этого, можно добавлять правила в директиву `@media` без повторения селекторов или нарушения потока таблицы стилей.

Рассмотрим пример:

`.navbar { width: 400px; @media picture and (orientation: portrait) { width: 300px; height: auto; } }`

Теперь посмотрим на результат компиляции:

`.navbar { width: 400px; } @media picture and (orientation: portrait) { .navbar { width: 300px; height: auto; } }`

Также существует возможность вкладывать `@media` запросы друг в друга, а после компиляции они соединяются оператором `and`:

`@media div { .picture { @media (orientation: portrait) { width: 200px; } } }`

Вот что мы увидим после компиляции:

`@media div and (orientation: portrait) { .picture { width: 200px; } }`

Еще одной особенностью директивы `@media` является то, что с ее помощью можно передавать переменные, функции и операторы:

`$media: style; $feature: -webkit-max-device; $value: 3.0; @media #{$media} and ($feature: $value) { div { color: red; } }`

И в файле `style.css` мы получаем следующий код:

`@media style and (-webkit-max-device: 3) { div { color: red; } }`

Расскажите, каким будет результат компиляции следующего кода:

`.active-link { color: blue; @media content { font-size: 14px; text-decoration: underline; } }`

Расскажите, каким будет результат компиляции следующего кода:

`@media p { #product-card { @media (font-family: Arial) { font-size: 12px; } } #product-card-title { @media (font-family: Arial) { font-size: 14px; font-weight: bold; } } }`

Расскажите, каким будет результат компиляции следующего кода:

`$var: link; $font: font-size; $size: 10px; @media #{$var} and ($font: $size) { .block { color: red; } }`
← →
↑