mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-11 04:01:15 -04:00
fix(curriculum): example code, challenge (#55307)
Co-authored-by: Sem Bauke <sem@freecodecamp.org> Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Lasse Jørgensen
@@ -8,85 +8,112 @@ 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`:
|
||||
In Sass, a <dfn>mixin</dfn> is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule.
|
||||
|
||||
```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;
|
||||
@mixin reset-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
@include reset-list;
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
Compiles to:
|
||||
|
||||
```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;
|
||||
```css
|
||||
nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin.
|
||||
|
||||
```scss
|
||||
div {
|
||||
@include box-shadow(0px, 0px, 4px, #fff);
|
||||
@mixin prose($font-size, $spacing) {
|
||||
font-size: $font-size;
|
||||
margin: 0;
|
||||
margin-block-end: $spacing;
|
||||
}
|
||||
|
||||
p {
|
||||
@include prose(1.25rem, 1rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include prose(2.4rem, 1.5rem);
|
||||
}
|
||||
```
|
||||
|
||||
You can make arguments optional by giving the parameters default values.
|
||||
|
||||
```scss
|
||||
@mixin text-color($color: black) {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
p {
|
||||
@include text-color(); /* color: black */
|
||||
}
|
||||
|
||||
nav a {
|
||||
@include text-color(orange);
|
||||
}
|
||||
```
|
||||
|
||||
# --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`.
|
||||
Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
|
||||
|
||||
Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should declare a mixin named `border-radius` which has a parameter named `$radius`.
|
||||
You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
|
||||
assert.match(code, /@mixin\s+shape\s*\(\s*\$w,\s*\$h,\s*\$bg-color\s*\)\s*{/gi);
|
||||
```
|
||||
|
||||
Your code should include the `-webkit-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
Your mixin should include a `width` property that uses the `$w` parameter.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
|
||||
);
|
||||
assert.match(__helpers.removeWhiteSpace(code), /width:\$w;/gi);
|
||||
```
|
||||
|
||||
Your code should include the `-moz-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
Your mixin should include a `height` property that uses the `$h` parameter.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
|
||||
);
|
||||
assert.match(__helpers.removeWhiteSpace(code), /height:\$h;/gi);
|
||||
```
|
||||
|
||||
Your code should include the `-ms-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
Your mixin should include a `background-color` property that uses the `$bg-color` parameter.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
|
||||
assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
|
||||
```
|
||||
|
||||
Your code should include the general `border-radius` rule that uses the `$radius` parameter.
|
||||
You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
|
||||
4
|
||||
);
|
||||
assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
|
||||
```
|
||||
|
||||
Your code should call the `border-radius mixin` using the `@include` keyword, setting it to `15px`.
|
||||
You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
|
||||
assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
|
||||
```
|
||||
|
||||
You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
|
||||
|
||||
```js
|
||||
assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@@ -95,38 +122,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
#square {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#rect-a {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
|
||||
#awesome {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: green;
|
||||
|
||||
}
|
||||
#rect-b {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="awesome"></div>
|
||||
<div id="square"></div>
|
||||
<div id="rect-a"></div>
|
||||
<div id="rect-b"></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;
|
||||
}
|
||||
@mixin shape($w, $h, $bg-color) {
|
||||
width: $w;
|
||||
height: $h;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
#awesome {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: green;
|
||||
@include border-radius(15px);
|
||||
}
|
||||
#square {
|
||||
@include shape(50px, 50px, red);
|
||||
}
|
||||
|
||||
#rect-a {
|
||||
@include shape(100px, 50px, blue);
|
||||
}
|
||||
|
||||
#rect-b {
|
||||
@include shape(50px, 100px, orange);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="awesome"></div>
|
||||
<div id="square"></div>
|
||||
<div id="rect-a"></div>
|
||||
<div id="rect-b"></div>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user