4.4 KiB
4.4 KiB
id | title | challengeType |
---|---|---|
587d7dbd367417b2b2512bb6 | Create Reusable CSS with Mixins | 0 |
Description
mixin
is a group of CSS declarations that can be reused throughout the style sheet.
Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider "box-shadow":
div {It's a lot of typing to re-write this rule for all the elements that have a
-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
, 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){The definition starts with
-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
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
mixin
for 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 <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), 'Your code should declare a <code>mixin</code> named <code>border-radius</code> which has a parameter named <code>$radius</code>.');
- 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), 'Your code should include the <code>-webkit-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');
- 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), 'Your code should include the <code>-moz-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');
- 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), 'Your code should include the <code>-ms-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');
- 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, 'Your code should include the general <code>border-radius</code> rule that uses the <code>$radius</code> parameter.');
- 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), '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