133 lines
3.3 KiB
Markdown
133 lines
3.3 KiB
Markdown
---
|
|
id: 587d7dbd367417b2b2512bb6
|
|
title: Create Reusable CSS with Mixins
|
|
challengeType: 0
|
|
forumTopicId: 301455
|
|
dashedName: create-reusable-css-with-mixins
|
|
---
|
|
|
|
# --description--
|
|
|
|
In Sass, a <dfn>mixin</dfn> 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`:
|
|
|
|
```scss
|
|
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:
|
|
|
|
```scss
|
|
@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:
|
|
|
|
```scss
|
|
div {
|
|
@include box-shadow(0px, 0px, 4px, #fff);
|
|
}
|
|
```
|
|
|
|
# --instructions--
|
|
|
|
Write a 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`.
|
|
|
|
# --hints--
|
|
|
|
Your code should declare a mixin named `border-radius` which has a parameter named `$radius`.
|
|
|
|
```js
|
|
assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
|
|
```
|
|
|
|
Your code should include the `-webkit-border-radius` vendor prefix that uses the `$radius` parameter.
|
|
|
|
```js
|
|
assert(
|
|
__helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
|
|
);
|
|
```
|
|
|
|
Your code should include the `-moz-border-radius` vendor prefix that uses the `$radius` parameter.
|
|
|
|
```js
|
|
assert(
|
|
__helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
|
|
);
|
|
```
|
|
|
|
Your code should include the `-ms-border-radius` vendor prefix that uses the `$radius` parameter.
|
|
|
|
```js
|
|
assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
|
|
```
|
|
|
|
Your code should include the general `border-radius` rule that uses the `$radius` parameter.
|
|
|
|
```js
|
|
assert(
|
|
__helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
|
|
4
|
|
);
|
|
```
|
|
|
|
Your code should call the `border-radius mixin` using the `@include` keyword, setting it to `15px`.
|
|
|
|
```js
|
|
assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<style type='text/scss'>
|
|
|
|
|
|
|
|
#awesome {
|
|
width: 150px;
|
|
height: 150px;
|
|
background-color: green;
|
|
|
|
}
|
|
</style>
|
|
|
|
<div id="awesome"></div>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
<style type='text/scss'>
|
|
@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>
|
|
```
|