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

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

Рассмотрим следующий пример:

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

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

`p { border-color: blue; border-width: 1in; border-style: dashed; }`

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

`@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 simple-border($padding-top, $padding-bottom) { border: { padding-top: $padding-top; padding-bottom: $padding-bottom; color: green; } } p { @include simple-border(10px, 30px ); }`

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

`@mixin simple-border($padding-top, $padding-bottom: 20px) { border: { padding-top: $padding-top; padding-bottom: $padding-bottom; color: green; } } p { @include simple-border(10px); }`
← →
↑