freeCodeCamp/curriculum/challenges/russian/03-front-end-libraries/sass/create-reusable-css-with-mixins.russian.md

id, title, challengeType, forumTopicId, localeTitle

id	title	challengeType	forumTopicId	localeTitle
587d7dbd367417b2b2512bb6	Create Reusable CSS with Mixins	0	301455	Создать многоразовый 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

tests:
  - text: Your code should declare a <code>mixin</code> named <code>border-radius</code> which has a parameter named <code>$radius</code>.
    testString: assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
  - text: Your code should include the <code>-webkit-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.
    testString: assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi));
  - text: Your code should include the <code>-moz-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.
    testString: assert(code.match(/-moz-border-radius:\s*?\$radius;/gi));
  - text: Your code should include the <code>-ms-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.
    testString: assert(code.match(/-ms-border-radius:\s*?\$radius;/gi));
  - text: Your code should include the general <code>border-radius</code> rule that uses the <code>$radius</code> parameter.
    testString: assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4);
  - text: Your code should call the <code>border-radius mixin</code> using the <code>@include</code> keyword, setting it to 15px.
    testString: assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi));

Challenge Seed

<style type='text/sass'>



  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;

  }
</style>

<div id="awesome"></div>

Solution

<style type='text/sass'>
  @mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
  }

  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;
    @include border-radius(15px);
  }
</style>

<div id="awesome"></div>