Added solution to this challenge. (#25470)

This commit is contained in:
Paul Gamble 2018-10-23 08:16:30 -04:00 committed by Aditya
parent 5e951090bf
commit c8aed97e48

View File

@ -72,8 +72,48 @@ tests:
## Solution
<section id='solution'>
The solution requires using the $color variable twice: once for the class name and once for setting the background color. You can use either the list or map data type.
### List Data type
```js
// solution required
<style type='text/sass'>
@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>
```
### Map Data type
```js
<style type='text/sass'>
$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>
```
</section>