gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add 'back/front end' in curriculum (#42596)

Browse Source 
* chore: rename APIs and Microservices to include "Backend" (#42515)

* fix typo

* fix typo

* undo change

* Corrected grammar mistake

Corrected a grammar mistake by removing a comma.

* change APIs and Microservices cert title

* update title

* Change APIs and Microservices certi title

* Update translations.json

* update title

* feat(curriculum): rename apis and microservices cert

* rename folder structure

* rename certificate

* rename learn Markdown

* apis-and-microservices -> back-end-development-and-apis

* update backend meta

* update i18n langs and cypress test

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: add development to front-end libraries (#42512)

* fix: added-the-word-Development-to-front-end-libraries

* fix/added-the-word-Development-to-front-end-libraries

* fix/added-word-development-to-front-end-libraries-in-other-related-files

* fix/added-the-word-Development-to-front-end-and-all-related-files

* fix/removed-typos-from-last-commit-in-index.md

* fix/reverted-changes-that-i-made-to-dependecies

* fix/removed xvfg

* fix/reverted changes that i made to package.json

* remove unwanted changes

* front-end-development-libraries changes

* rename backend certSlug and README

* update i18n folder names and keys

* test: add legacy path redirect tests

This uses serve.json from the client-config repo, since we currently use
that in production

* fix: create public dir before moving serve.json

* fix: add missing script

* refactor: collect redirect tests

* test: convert to cy.location for stricter tests

* rename certificate folder to 00-certificates

* change crowdin config to recognise new certificates location

* allow translations to be used

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* add forwards slashes to path redirects

* fix cypress path tests again

* plese cypress

* fix: test different challenge

Okay so I literally have no idea why this one particular challenge
fails in Cypress Firefox ONLY. Tom and I paired and spun a full build
instance and confirmed in Firefox the page loads and redirects as
expected. Changing to another bootstrap challenge passes Cypress firefox
locally. Absolutely boggled by this.

AAAAAAAAAAAAAAA

* fix: separate the test

Okay apparently the test does not work unless we separate it into
a different `it` statement.

>:( >:( >:( >:(

Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com>
Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
Shaun Hamilton
2021-08-14 03:57:13 +01:00
committed by GitHub
parent 4df2a0c542
commit c2a11ad00d
1215 changed files with 790 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
curriculum/challenges/english/03-front-end-development-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.md Normal file
View File

@ -0,0 +1,117 @@
---
id: 587d7dbf367417b2b2512bbb
title: Apply a Style Until a Condition is Met with @while
challengeType: 0
forumTopicId: 301454
dashedName: apply-a-style-until-a-condition-is-met-with-while
---
# --description--
The `@while` directive is an option with similar functionality to the JavaScript `while` loop. It creates CSS rules until a condition is met.
The `@for` challenge gave an example to create a simple grid system. This can also work with `@while`.
```scss
$x: 1;
@while $x < 13 {
.col-#{$x} { width: 100%/12 * $x;}
$x: $x + 1;
}
```
First, define a variable `$x` and set it to 1. Next, use the `@while` directive to create the grid system *while* `$x` is less than 13. After setting the CSS rule for `width`, `$x` is incremented by 1 to avoid an infinite loop.
# --instructions--
Use `@while` to create a series of classes with different `font-sizes`.
There should be 5 different classes from `text-1` to `text-5`. Then set `font-size` to `15px` multiplied by the current index number. Make sure to avoid an infinite loop!
# --hints--
Your code should use the `@while` directive.
```js
assert(code.match(/@while /g));
```
Your code should use an index variable which starts at an index of 1.
```js
assert(code.match(/\$.*:\s*?1;/gi));
```
Your code should increment the counter variable.
```js
assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi));
```
Your `.text-1` class should have a `font-size` of `15px`.
```js
assert($('.text-1').css('font-size') == '15px');
```
Your `.text-2` class should have a `font-size` of `30px`.
```js
assert($('.text-2').css('font-size') == '30px');
```
Your `.text-3` class should have a `font-size` of `45px`.
```js
assert($('.text-3').css('font-size') == '45px');
```
Your `.text-4` class should have a `font-size` of `60px`.
```js
assert($('.text-4').css('font-size') == '60px');
```
Your `.text-5` class should have a `font-size` of `75px`.
```js
assert($('.text-5').css('font-size') == '75px');
```
# --seed--
## --seed-contents--
```html
<style type='text/scss'>
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
```
# --solutions--
```html
<style type='text/scss'>
$x: 1;
@while $x < 6 {
.text-#{$x}{
font-size: 15px * $x;
}
$x: $x + 1;
}
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
```

132
curriculum/challenges/english/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md Normal file
View File

@ -0,0 +1,132 @@
---
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>
```

116
curriculum/challenges/english/03-front-end-development-libraries/sass/extend-one-set-of-css-styles-to-another-element.md Normal file
View File

@ -0,0 +1,116 @@
---
id: 587d7fa5367417b2b2512bbd
title: Extend One Set of CSS Styles to Another Element
challengeType: 0
forumTopicId: 301456
dashedName: extend-one-set-of-css-styles-to-another-element
---
# --description--
Sass has a feature called `extend` that makes it easy to borrow the CSS rules from one element and build upon them in another.
For example, the below block of CSS rules style a `.panel` class. It has a `background-color`, `height` and `border`.
```scss
.panel{
background-color: red;
height: 70px;
border: 2px solid green;
}
```
Now you want another panel called `.big-panel`. It has the same base properties as `.panel`, but also needs a `width` and `font-size`. It's possible to copy and paste the initial CSS rules from `.panel`, but the code becomes repetitive as you add more types of panels. The `extend` directive is a simple way to reuse the rules written for one element, then add more for another:
```scss
.big-panel{
@extend .panel;
width: 150px;
font-size: 2em;
}
```
The `.big-panel` will have the same properties as `.panel` in addition to the new styles.
# --instructions--
Make a class `.info-important` that extends `.info` and also has a `background-color` set to magenta.
# --hints--
Your `info-important` class should have a `background-color` set to `magenta`.
```js
assert(
code.match(
/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi
)
);
```
Your `info-important` class should use `@extend` to inherit the styling from the `info` class.
```js
assert(
code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi)
);
```
# --seed--
## --seed-contents--
```html
<style type='text/scss'>
h3{
text-align: center;
}
.info{
width: 200px;
border: 1px solid black;
margin: 0 auto;
}
</style>
<h3>Posts</h3>
<div class="info-important">
<p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
</div>
<div class="info">
<p>This is a simple post. It has basic styling and can be extended for other uses.</p>
</div>
```
# --solutions--
```html
<style type='text/scss'>
h3{
text-align: center;
}
.info{
width: 200px;
border: 1px solid black;
margin: 0 auto;
}
.info-important{
@extend .info;
background-color: magenta;
}
</style>
<h3>Posts</h3>
<div class="info-important">
<p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
</div>
<div class="info">
<p>This is a simple post. It has basic styling and can be extended for other uses.</p>
</div>
```

105
curriculum/challenges/english/03-front-end-development-libraries/sass/nest-css-with-sass.md Normal file
View File

@ -0,0 +1,105 @@
---
id: 587d7dbd367417b2b2512bb5
title: Nest CSS with Sass
challengeType: 0
forumTopicId: 301457
dashedName: nest-css-with-sass
---
# --description--
Sass allows nesting of CSS rules, which is a useful way of organizing a style sheet.
Normally, each element is targeted on a different line to style it, like so:
```scss
nav {
background-color: red;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
```
For a large project, the CSS file will have many lines and rules. This is where nesting can help organize your code by placing child style rules within the respective parent elements:
```scss
nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block;
}
}
}
```
# --instructions--
Use the nesting technique shown above to re-organize the CSS rules for both children of `.blog-post` element. For testing purposes, the `h1` should come before the `p` element.
# --hints--
Your code should re-organize the CSS rules so the `h1` and `p` are nested in the `.blog-post` parent element.
```js
assert(
code.match(
/\.blog-post\s*?{\s*?h1\s*?{\s*?text-align:\s*?center;\s*?color:\s*?blue;\s*?}\s*?p\s*?{\s*?font-size:\s*?20px;\s*?}\s*?}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style type='text/scss'>
.blog-post {
}
h1 {
text-align: center;
color: blue;
}
p {
font-size: 20px;
}
</style>
<div class="blog-post">
<h1>Blog Title</h1>
<p>This is a paragraph</p>
</div>
```
# --solutions--
```html
<style type='text/scss'>
.blog-post {
h1 {
text-align: center;
color: blue;
}
p {
font-size: 20px;
}
}
</style>
<div class="blog-post">
<h1>Blog Title</h1>
<p>This is a paragraph</p>
</div>
```

47
curriculum/challenges/english/03-front-end-development-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md Normal file
View File

@ -0,0 +1,47 @@
---
id: 587d7dbf367417b2b2512bbc
title: Split Your Styles into Smaller Chunks with Partials
challengeType: 0
forumTopicId: 301459
dashedName: split-your-styles-into-smaller-chunks-with-partials
---
# --description--
<dfn>Partials</dfn> in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.
Names for partials start with the underscore (`_`) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the `.scss` file extension. To bring the code in the partial into another Sass file, use the `@import` directive.
For example, if all your mixins are saved in a partial named "\_mixins.scss", and they are needed in the "main.scss" file, this is how to use them in the main file:
```scss
@import 'mixins'
```
Note that the underscore and file extension are not needed in the `import` statement - Sass understands it is a partial. Once a partial is imported into a file, all variables, mixins, and other code are available to use.
# --instructions--
Write an `@import` statement to import a partial named `_variables.scss` into the main.scss file.
# --hints--
Your code should use the `@import` directive, and should not include the underscore in the file name.
```js
assert(code.match(/@import\s+?('|")variables\1/gi));
```
# --seed--
## --seed-contents--
```html
<!-- The main.scss file -->
```
# --solutions--
```html
@import 'variables'
```

121
curriculum/challenges/english/03-front-end-development-libraries/sass/store-data-with-sass-variables.md Normal file
View File

@ -0,0 +1,121 @@
---
id: 587d7dbd367417b2b2512bb4
title: Store Data with Sass Variables
challengeType: 0
forumTopicId: 301460
dashedName: store-data-with-sass-variables
---
# --description--
One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.
In JavaScript, variables are defined using the `let` and `const` keywords. In Sass, variables start with a `$` followed by the variable name.
Here are a couple examples:
```scss
$main-fonts: Arial, sans-serif;
$headings-color: green;
```
And to use the variables:
```scss
h1 {
font-family: $main-fonts;
color: $headings-color;
}
```
One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.
# --instructions--
Create a variable `$text-color` and set it to `red`. Then change the value of the `color` property for the `.blog-post` and `h2` to the `$text-color` variable.
# --hints--
Your code should have a Sass variable declared for `$text-color` with a value of `red`.
```js
assert(code.match(/\$text-color\s*:\s*?red\s*;/g));
```
Your code should use the `$text-color` variable to change the `color` for the `.blog-post` and `h2` items.
```js
assert(code.match(/color\s*:\s*\$text-color\s*;?/g));
```
Your `.blog-post` element should have a `color` of red.
```js
assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
```
Your `h2` elements should have a `color` of red.
```js
assert($('h2').css('color') == 'rgb(255, 0, 0)');
```
# --seed--
## --seed-contents--
```html
<style type='text/scss'>
.header{
text-align: center;
}
.blog-post, h2 {
color: red;
}
</style>
<h1 class="header">Learn Sass</h1>
<div class="blog-post">
<h2>Some random title</h2>
<p>This is a paragraph with some random text in it</p>
</div>
<div class="blog-post">
<h2>Header #2</h2>
<p>Here is some more random text.</p>
</div>
<div class="blog-post">
<h2>Here is another header</h2>
<p>Even more random text within a paragraph</p>
</div>
```
# --solutions--
```html
<style type='text/scss'>
$text-color: red;
.header{
text-align: center;
}
.blog-post, h2 {
color: $text-color;
}
</style>
<h1 class="header">Learn Sass</h1>
<div class="blog-post">
<h2>Some random title</h2>
<p>This is a paragraph with some random text in it</p>
</div>
<div class="blog-post">
<h2>Header #2</h2>
<p>Here is some more random text.</p>
</div>
<div class="blog-post">
<h2>Here is another header</h2>
<p>Even more random text within a paragraph</p>
</div>
```

135
curriculum/challenges/english/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md Normal file
View File

@ -0,0 +1,135 @@
---
id: 587d7dbf367417b2b2512bba
title: Use @each to Map Over Items in a List
challengeType: 0
forumTopicId: 301461
dashedName: use-each-to-map-over-items-in-a-list
---
# --description--
The last challenge showed how the `@for` directive uses a starting and ending value to loop a certain number of times. Sass also offers the `@each` directive which loops over each item in a list or map. On each iteration, the variable gets assigned to the current value from the list or map.
```scss
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
```
A map has slightly different syntax. Here's an example:
```scss
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}
```
Note that the `$key` variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have `color1`, `color2`... in it. Both of the above code examples are converted into the following CSS:
```scss
.blue-text {
color: blue;
}
.red-text {
color: red;
}
.green-text {
color: green;
}
```
# --instructions--
Write an `@each` directive that goes through a list: `blue, black, red` and assigns each variable to a `.color-bg` class, where the `color` part changes for each item. Each class should set the `background-color` the respective color.
# --hints--
Your code should use the `@each` directive.
```js
assert(code.match(/@each /g));
```
Your `.blue-bg` class should have a `background-color` of blue.
```js
assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
```
Your `.black-bg` class should have a `background-color` of black.
```js
assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
```
Your `.red-bg` class should have a `background-color` of red.
```js
assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
```
# --seed--
## --seed-contents--
```html
<style type='text/scss'>
div {
height: 200px;
width: 200px;
}
</style>
<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>
```
# --solutions--
```html
<style type='text/scss'>
@each $color in blue, black, red {
.#{$color}-bg {background-color: $color;}
}
div {
height: 200px;
width: 200px;
}
</style>
<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>
```
---
```html
<style type='text/scss'>
$colors: (color1: blue, color2: black, color3: red);
@each $key, $color in $colors {
.#{$color}-bg {background-color: $color;}
}
div {
height: 200px;
width: 200px;
}
</style>
<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>
```

139
curriculum/challenges/english/03-front-end-development-libraries/sass/use-for-to-create-a-sass-loop.md Normal file
View File

@ -0,0 +1,139 @@
---
id: 587d7dbe367417b2b2512bb9
title: Use @for to Create a Sass Loop
challengeType: 0
forumTopicId: 301462
dashedName: use-for-to-create-a-sass-loop
---
# --description--
The `@for` directive adds styles in a loop, very similar to a `for` loop in JavaScript.
`@for` is used in two ways: "start through end" or "start to end". The main difference is that the "start **to** end" *excludes* the end number as part of the count, and "start **through** end" *includes* the end number as part of the count.
Here's a start **through** end example:
```scss
@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}
```
The `#{$i}` part is the syntax to combine a variable (`i`) with text to make a string. When the Sass file is converted to CSS, it looks like this:
```scss
.col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66667%;
}
...
.col-12 {
width: 100%;
}
```
This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.
# --instructions--
Write a `@for` directive that takes a variable `$j` that goes from 1 **to** 6.
It should create 5 classes called `.text-1` to `.text-5` where each has a `font-size` set to 15px multiplied by the index.
# --hints--
Your code should use the `@for` directive.
```js
assert(code.match(/@for /g));
```
Your `.text-1` class should have a `font-size` of 15px.
```js
assert($('.text-1').css('font-size') == '15px');
```
Your `.text-2` class should have a `font-size` of 30px.
```js
assert($('.text-2').css('font-size') == '30px');
```
Your `.text-3` class should have a `font-size` of 45px.
```js
assert($('.text-3').css('font-size') == '45px');
```
Your `.text-4` class should have a `font-size` of 60px.
```js
assert($('.text-4').css('font-size') == '60px');
```
Your `.text-5` class should have a `font-size` of 75px.
```js
assert($('.text-5').css('font-size') == '75px');
```
# --seed--
## --seed-contents--
```html
<style type='text/scss'>
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
```
# --solutions--
```html
<style type='text/scss'>
@for $i from 1 through 5 {
.text-#{$i} { font-size: 15px * $i; }
}
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
```
---
```html
<style type='text/scss'>
@for $i from 1 to 6 {
.text-#{$i} { font-size: 15px * $i; }
}
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
```

145
curriculum/challenges/english/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md Normal file
View File

@ -0,0 +1,145 @@
---
id: 587d7dbe367417b2b2512bb8
title: Use @if and @else to Add Logic To Your Styles
challengeType: 0
forumTopicId: 301463
dashedName: use-if-and-else-to-add-logic-to-your-styles
---
# --description--
The `@if` directive in Sass is useful to test for a specific case - it works just like the `if` statement in JavaScript.
```scss
@mixin make-bold($bool) {
@if $bool == true {
font-weight: bold;
}
}
```
And just like in JavaScript, `@else if` and `@else` test for more conditions:
```scss
@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}
```
# --instructions--
Create a mixin called `border-stroke` that takes a parameter `$val`. The mixin should check for the following conditions using `@if`, `@else if`, and `@else`:
```scss
light - 1px solid black
medium - 3px solid black
heavy - 6px solid black
```
If `$val` is not `light`, `medium`, or `heavy`, the border should be set to `none`.
# --hints--
Your code should declare a mixin named `border-stroke` which has a parameter named `$val`.
```js
assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
```
Your mixin should have an `@if` statement to check if `$val` is `light`, and to set the `border` to `1px solid black`.
```js
assert(
code.match(
/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi
)
);
```
Your mixin should have an `@else if` statement to check if `$val` is `medium`, and to set the `border` to `3px solid black`.
```js
assert(
code.match(
/@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi
)
);
```
Your mixin should have an `@else if` statement to check if `$val` is `heavy`, and to set the `border` to `6px solid black`.
```js
assert(
code.match(
/@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi
)
);
```
Your mixin should have an `@else` statement to set the `border` to `none`.
```js
assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
```
# --seed--
## --seed-contents--
```html
<style type='text/scss'>
#box {
width: 150px;
height: 150px;
background-color: red;
@include border-stroke(medium);
}
</style>
<div id="box"></div>
```
# --solutions--
```html
<style type='text/scss'>
@mixin border-stroke($val) {
@if $val == light {
border: 1px solid black;
}
@else if $val == medium {
border: 3px solid black;
}
@else if $val == heavy {
border: 6px solid black;
}
@else {
border: none;
}
}
#box {
width: 150px;
height: 150px;
background-color: red;
@include border-stroke(medium);
}
</style>
<div id="box"></div>
```