# Использование миксинов в SASS

После того как мы объявили миксин мы вызываем его директивой `@include`, которая должна обязательно включать имя миксина. Также в ней опционально могут быть параметры и стили. Рассмотрим пример:

`@mixin mix{ width: 100px; height: 100px; } div { @include mix; padding: 4px; margin-top: 10px; }`

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

`div { width: 100px; height: 100px; padding: 4px; margin-top: 10px; }`

Вызывать миксины можно и в корне документа, но только в том случае, когда они не описывают правила и в них нет ссылки на родителя. Смотрите следующий пример:

`@mixin active { p { color: #161618; background-color: red; } } @include active;`

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

`p { color: #161618; background-color: red; }`

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

`@mixin font { font-family:'Courier New', Courier, monospace; font-size: 12px; } #product-card { @include font; color: #090957; font-weight: 600px; }`

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

`@mixin style { color:#090957; } button, link { @include style; font-size: 10px; padding: 4px; }`

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

`@mixin active-text { font-size: 14px; font-weight: bold; text-decoration: underline; color: blue; } #product-card, .active, .content { @include active-text; padding: 4px; }`

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

`@mixin size { font-size: 14px; padding: 10px; margin: 4px; } @mixin color { color: #580909; background-color: #e9e5ab; } #product-card { @include size; @include color; width: 600px; }`
←→
↑