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
2021-01-13 02:31:00 +00:00
dashedName: use-if-and-else-to-add-logic-to-your-styles
2018-10-04 13:37:37 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
The `@if` directive in Sass is useful to test for a specific case - it works just like the `if` statement in JavaScript.
2019-05-14 12:01:32 +00:00
```scss
@mixin make-bold($bool) {
@if $bool == true {
font-weight: bold;
}
}
```
2020-11-27 18:02:05 +00:00
And just like in JavaScript, `@else if` and `@else` 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;
}
}
```
2020-11-27 18:02:05 +00:00
# --instructions--
2018-10-04 13:37:37 +00:00
2020-11-27 18:02:05 +00:00
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` :
2019-05-14 12:01:32 +00:00
```scss
light - 1px solid black
medium - 3px solid black
heavy - 6px solid black
```
2020-11-27 18:02:05 +00:00
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));
```
2021-02-25 17:19:24 +00:00
Your mixin should have an `@if` statement to check if `$val` is `light` , and to set the `border` to `1px solid black` .
2018-10-04 13:37:37 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(
code.match(
/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi
)
);
2018-10-04 13:37:37 +00:00
```
2021-02-25 17:19:24 +00:00
Your mixin should have an `@else if` statement to check if `$val` is `medium` , and to set the `border` to `3px solid black` .
2020-11-27 18:02:05 +00:00
```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
)
);
```
2018-10-04 13:37:37 +00:00
2021-02-25 17:19:24 +00:00
Your mixin should have an `@else if` statement to check if `$val` is `heavy` , and to set the `border` to `6px solid black` .
2020-11-27 18:02:05 +00:00
```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
)
);
```
2018-10-04 13:37:37 +00:00
2021-02-25 17:19:24 +00:00
Your mixin should have an `@else` statement to set the `border` to `none` .
2020-11-27 18:02:05 +00:00
```js
assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
```
# --seed--
## --seed-contents--
2018-10-04 13:37:37 +00:00
```html
2020-05-09 14:31:18 +00:00
< style type = 'text/scss' >
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 >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-10-04 13:37:37 +00:00
2019-04-30 23:55:22 +00:00
```html
2020-05-09 14:31:18 +00:00
< style type = 'text/scss' >
2019-04-30 23:55:22 +00:00
@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
```