---
id: 587d7dbd367417b2b2512bb6
title: Create Reusable CSS with Mixins
challengeType: 0
forumTopicId: 301455
localeTitle: Создать многоразовый CSS с помощью Mixins
---
## Description
В Sass mixin представляет собой группу объявлений CSS, которые можно использовать повторно в таблице стилей. Новые функции CSS требуют времени, прежде чем они будут полностью приняты и готовы к использованию во всех браузерах. По мере добавления функций в браузеры, правила CSS, использующие их, могут потребоваться префиксы поставщиков. Рассмотрим «box-shadow»: div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
Очень много нужно переписать это правило для всех элементов, у которых есть box-shadow , или изменить каждое значение для проверки различных эффектов. Mixins похожи на функции CSS. Вот как написать один: @mixin box-shadow ($ x, $ y, $ blur, $ c) {
-webkit-box-shadow: $ x, $ y, $ blur, $ c;
-moz-box-shadow: $ x, $ y, $ blur, $ c;
-ms-box-shadow: $ x, $ y, $ blur, $ c;
box-shadow: $ x, $ y, $ blur, $ c;
}
Определение начинается с @mixin за которым следует пользовательское имя. Параметры ( $x , $y , $blur и $c в приведенном выше примере) являются необязательными. Теперь, когда требуется правило box-shadow , только одна строка, вызывающая mixin заменяет необходимость вводить все префиксы поставщика. mixin вызывается с директивой @include : div {
@include box-shadow (0px, 0px, 4px, #fff);
}
## Instructions
Напишите mixin для mixin border-radius и дайте ему параметр $radius . Он должен использовать все префиксы поставщика из примера. Затем используйте #awesome border-radius mixin чтобы придать #awesome элементам радиус границы 15px.
## Tests
```yml
tests:
- text: Your code should declare a mixin named border-radius which has a parameter named $radius.
testString: assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
- text: Your code should include the -webkit-border-radius vender prefix that uses the $radius parameter.
testString: assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi));
- text: Your code should include the -moz-border-radius vender prefix that uses the $radius parameter.
testString: assert(code.match(/-moz-border-radius:\s*?\$radius;/gi));
- text: Your code should include the -ms-border-radius vender prefix that uses the $radius parameter.
testString: assert(code.match(/-ms-border-radius:\s*?\$radius;/gi));
- text: Your code should include the general border-radius rule that uses the $radius parameter.
testString: assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4);
- text: Your code should call the border-radius mixin using the @include keyword, setting it to 15px.
testString: assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi));
```
## Challenge Seed
## Solution