3.7 KiB
3.7 KiB
id | title | challengeType | forumTopicId |
---|---|---|---|
587d7dbd367417b2b2512bb6 | Create Reusable CSS with Mixins | 0 | 301455 |
Description
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;
}
It's a lot of typing to re-write this rule for all the elements that have a box-shadow
, or to change each value to test different effects.
Mixins are like functions for CSS. Here is how to write one:
@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;
}
The definition starts with @mixin
followed by a custom name. The parameters (the $x
, $y
, $blur
, and $c
in the example above) are optional.
Now any time a box-shadow
rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the @include
directive:
div {
@include box-shadow(0px, 0px, 4px, #fff);
}
Instructions
border-radius
and give it a $radius
parameter. It should use all the vendor prefixes from the example. Then use the border-radius
mixin to give the #awesome
element a border radius of 15px.
Tests
tests:
- text: Your code should declare a mixin 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>