5.7 KiB
5.7 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d7dbd367417b2b2512bb6 | Create Reusable CSS with Mixins | 0 | Создать многоразовый CSS с помощью Mixins |
Description
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: Ваш код должен объявить <code>mixin</code> именем <code>border-radius</code> который имеет параметр с именем <code>$radius</code> .
testString: 'assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi), "Your code should declare a <code>mixin</code> named <code>border-radius</code> which has a parameter named <code>$radius</code>.");'
- text: Ваш код должен включать <code>-webkit-border-radius</code> который использует параметр <code>$radius</code> .
testString: 'assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi), "Your code should include the <code>-webkit-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.");'
- text: 'Ваш код должен включать префикс <code>-moz-border-radius</code> vender, который использует параметр <code>$radius</code> .'
testString: 'assert(code.match(/-moz-border-radius:\s*?\$radius;/gi), "Your code should include the <code>-moz-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.");'
- text: 'Ваш код должен включать префикс <code>-ms-border-radius</code> vender, который использует параметр <code>$radius</code> .'
testString: 'assert(code.match(/-ms-border-radius:\s*?\$radius;/gi), "Your code should include the <code>-ms-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.");'
- text: Ваш код должен содержать общее правило <code>border-radius</code> которое использует параметр <code>$radius</code> .
testString: 'assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4, "Your code should include the general <code>border-radius</code> rule that uses the <code>$radius</code> parameter.");'
- text: 'Ваш код должен вызвать <code>@include</code> <code>border-radius mixin</code> с помощью <code>@include</code> слова <code>@include</code> , установив его на 15 пикселей.'
testString: 'assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi), "Your code should call the <code>border-radius mixin</code> using the <code>@include</code> keyword, setting it to 15px.");'
Challenge Seed
<style type='text/sass'>
#awesome {
width: 150px;
height: 150px;
background-color: green;
}
</style>
<div id="awesome"></div>
Solution
// solution required