Added solution to this challenge. (#25470)
This commit is contained in:
parent
5e951090bf
commit
c8aed97e48
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user