2018-10-04 13:37:37 +00:00
---
id: 587d7dbe367417b2b2512bb8
title: Use @if and @else to Add Logic To Your Styles
challengeType: 0
2019-08-05 16:17:33 +00:00
forumTopicId: 301463
2018-10-04 13:37:37 +00:00
---
## Description
< section id = 'description' >
The < code > @if< / code > directive in Sass is useful to test for a specific case - it works just like the < code > if< / code > statement in JavaScript< / code > .
2019-05-14 12:01:32 +00:00
```scss
@mixin make-bold($bool) {
@if $bool == true {
font-weight: bold;
}
}
```
2018-10-04 13:37:37 +00:00
And just like in JavaScript, < code > @else if< / code > and < code > @else< / code > test for more conditions:
2019-05-14 12:01:32 +00:00
```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;
}
}
```
2018-10-04 13:37:37 +00:00
< / section >
## Instructions
< section id = 'instructions' >
2019-10-27 16:45:37 +00:00
Create a mixin called < code > border-stroke< / code > that takes a parameter < code > $val< / code > . The mixin should check for the following conditions using < code > @if< / code > , < code > @else if< / code > , and < code > @else< / code > :
2019-05-14 12:01:32 +00:00
```scss
light - 1px solid black
medium - 3px solid black
heavy - 6px solid black
```
2019-02-08 20:11:05 +00:00
If < code > $val< / code > is not < code > light< / code > , < code > medium< / code > , or < code > heavy< / code > , the border should be set to < code > none< / code > .
2018-10-04 13:37:37 +00:00
< / section >
## Tests
< section id = 'tests' >
```yml
tests:
2019-10-27 16:45:37 +00:00
- text: Your code should declare a mixin named < code > border-stroke</ code > which has a parameter named < code > $val</ code > .
2019-07-25 06:53:37 +00:00
testString: assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
2019-10-27 16:45:37 +00:00
- text: Your mixin should have an < code > @if</ code > statement to check if < code > $val</ code > is light, and to set the < code > border</ code > to 1px solid black.
2019-07-25 06:53:37 +00:00
testString: assert(code.match(/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi));
2019-10-27 16:45:37 +00:00
- text: Your mixin should have an < code > @else if</ code > statement to check if < code > $val</ code > is medium, and to set the < code > border</ code > to 3px solid black.
2019-07-25 06:53:37 +00:00
testString: assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi));
2019-10-27 16:45:37 +00:00
- text: Your mixin should have an < code > @else if</ code > statement to check if < code > $val</ code > is heavy, and to set the < code > border</ code > to 6px solid black.
2019-07-25 06:53:37 +00:00
testString: assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi));
2019-10-27 16:45:37 +00:00
- text: Your mixin should have an < code > @else</ code > statement to set the < code > border</ code > to none.
2019-07-25 06:53:37 +00:00
testString: assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
2018-10-04 13:37:37 +00:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```html
< style type = 'text/sass' >
2018-10-08 00:01:53 +00:00
2018-10-04 13:37:37 +00:00
#box {
width: 150px;
height: 150px;
background-color: red;
@include border-stroke(medium);
2018-10-08 00:01:53 +00:00
}
2018-10-04 13:37:37 +00:00
< / style >
< div id = "box" > < / div >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
2019-04-30 23:55:22 +00:00
```html
< style type = 'text/sass' >
@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 >
2018-10-04 13:37:37 +00:00
```
2019-07-18 15:24:12 +00:00
2018-10-04 13:37:37 +00:00
< / section >