Какова роль директивы @media в SASS?

Опубликовано: 16 Августа, 2022

SASS расшифровывается как Syntactically Awesome Style Sheet. По сути, это препроцессор CSS, который помогает нам уменьшить повторения в коде CSS, а также помогает уменьшить сложность кода CSS. SASS упрощает понимание кода, используя различные функции, такие как примеси, переменные и т. д. Одной из таких важных функций SASS является директива @media , которая выполняет работу медиа-запроса в обычном CSS. В этой статье мы узнаем, как использовать директиву @media в SASS и как она работает.

Чтобы создать адаптивный веб-сайт, мы определяем разные стили CSS для разной ширины и высоты экрана. Это можно сделать с помощью медиа-запросов в CSS, однако код становится очень большим, и нам приходится повторять код несколько раз. SASS уменьшает эту сложность с помощью директивы @media . Директива позволяет элементу адаптироваться к разной ширине экрана.

Синтаксис:

.element {
    @media screen and (...) {

    }
}

Как видно из приведенного выше синтаксиса, в отличие от CSS директива @media может быть определена внутри селектора, что делает код короче и облегчает его понимание.

Пример: в приведенном ниже примере мы изменили цвет фона и размер шрифта в соответствии с изменением ширины экрана с помощью директив SASS @media. Мы свяжем файл с «style.css», созданным с помощью команды sass.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href="style.css">
</head>
  
<body>
    <h1>@media directive in SASS</h1>
</body>
  
</html>

SASS

body {
    background-color: rgb(95, 95, 207);
    font-size: 5rem;
    
    @media screen and (max-width : 800px) {
        background-color: rgb(150, 150, 235);
        font-size: 4rem;
    }
    
    @media screen and (max-width: 500px) {
        background-color: rgb(58, 58, 247);
        font-size: 3rem;
    }
}

Выход:

Picked CSS

Какова роль директивы @media в SASS?

HTML

SASS

РЕКОМЕНДУЕМЫЕ СТАТЬИ