Для чего используется директива @content?

Что такое директива @content ?

@content — это правило SASSAt, используемое для повторного использования блока кода за счет уменьшения повторения одного и того же кода. Он используется как тело в @mixin для включения блока кода, который передается через @include .

Пример 1. Запустите приведенный ниже код с препроцессором SASS. Он заменяет @content внутри @mixin на «белый» цвет, переданный с помощью @include .

Выход :

body {
    color: white;
}

Использование @content:

Обычно используется для замены кода. Вы можете использовать его с другими At-правилами или даже во вложенных селекторах. Вы ознакомитесь с некоторыми вариантами использования @content.

Пример 1. В этом примере @content используется для замены блока кода для медиа-запросов. Так что это поможет нам передавать разные атрибуты для разных размеров экрана. Мы упорядочиваем атрибуты устройства с маленьким экраном. Медиа-запрос будет применен к экрану с минимальной шириной 600 пикселей. Точно так же мы можем передать другой блок кода для других размеров экрана.

Выход :

@media screen and (min-width: 600px) {
    body {
        color: white;
    }
}

Пример 2. В этом примере @content используется для назначения тела @keyframes, где

• $name заменяется изменением размера
• @content заменяется на from{. . .} к {. . .}

Это помогает нам определять разные анимации с помощью одного синтаксического кода @mixin.

Выход :

@keyframes resize {
     from {
           width: 0%;
     }
     to {
           width: 100%;
     }
}

Пример 3: В этом примере @content используется для создания кнопок с разными цветами текста. Это помогает нам определить разные кнопки для разных целей.

Выход:

.alert {
   color : red;
}
.confirm {
   color : blue;
}

Пример 4: В этом примере @content используется во вложенных селекторах, где . child-attr передается внутри класса .parent .

Выход :

.parent {
     background-color: green;
}
.parent .child-attr {
     color: red;
}