# Именованные параметры миксинов в SASS

В миксины можно задавать именованные параметры. Давайте рассмотрим это на следующем примере:

`@mixin active($color) { border: { color: $color; style: solid; } } p { @include active($color: orange); } div { @include active($color: green); }`

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

`p { border-color: orange; border-style: solid; } div { border-color: green; border-style: solid; }`

Помимо того, в миксины можно передавать значения параметров по умолчанию:

`@mixin active($color, $width: 2px) { border: { color: $color; width: $width; style: dotted; } } p { @include active(yellow); } div { @include active(yellow, 4px); }`

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

`p { border-color: yellow; border-width: 2px; border-style: dotted; } div { border-color: yellow; border-width: 4px; border-style: dotted; }`

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

`@mixin super-button($color, $background-color, $border-radius) { color: $color; background-color: $background-color; border-radius: $border-radius; } .active-button { @include super-button($color: white, $background-color: red, $border-radius: 2px); }`

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

`@mixin super-button($color, $background-color, $border-radius: 5px) { color: $color; background-color: $background-color; border-radius: $border-radius; } .active-button { @include super-button($color: white, $background-color: red); }`

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

`@mixin super-button($color, $background-color: orange, $border-radius: 5px) { color: $color; background-color: $background-color; border-radius: $border-radius; } .active-button { @include super-button($color: white, $border-radius:3px); }`
← →
↑