# Блоки контента в миксинах в SASS

Для передачи блока стилей внутри миксина используем директиву `@content`, на место которой и встанут нужные нам стили.

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

`@mixin active { * div { @content; } } @include active { #block { color: red; } }`

Результат компиляции:

`* div #block { color: red; }`

Необходимо знать, что если мы указываем директиву `@content` более одного раза или внутри цикла, то столько же раз будет вызываться и блок стилей.

`@mixin active { div { @content; } navbar { @content; } } @include active { #block { color: red; } button { color:green; } }`

После компиляции мы увидим:

`div #block { color: red; } div button { color: green; } navbar #block { color: red; } navbar button { color: green; }`

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

`@mixin super-link { a { @content; } } @include super-link { color: blue; text-decoration: underline; }`

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

`@mixin super-link { a { @content; } a .primary-link{ @content; font-weight: bold; } } @include super-link { color: blue; text-decoration: underline; }`

Пусть у вас есть следующий миксин:

`@mixin colors { ... }`

Используя директиву `@content` установите для всех ссылок, относящихся к `#primary` синий цвет шрифта и волнистое подчеркивание.

←→
↑