Added solution to this challenge. (#25470)
This commit is contained in:
@ -73,7 +73,47 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='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
|
```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>
|
</section>
|
||||||
|
Reference in New Issue
Block a user