gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

SASS. @each. Replace stub (#34844)

Browse Source 
* SASS. @each. Replace stub

Added 1x guide/example, 1x problem, and 1x solution.

* Removed problem from solution

Removed the problem from solution.

* Fix languages and made formatting changes
This commit is contained in:
TylerGlenski
2019-03-09 01:03:18 -06:00
committed by The Coding Aviator
parent de5b88265f
commit 8d5d211975
1 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
guide/english/certifications/front-end-libraries/sass/use-each-to-map-over-items-in-a-list/index.md
View File

@@ -3,11 +3,31 @@ title: Use @each to Map Over Items in a List
--- ---
## Use @each to Map Over Items in a List ## Use @each to Map Over Items in a List
## Solution The @each directive loops over a list and for each iteration the variable is assigned the value in the list.
```sass ## Example:
```html
<style type='text/sass'> <style type='text/sass'>
@each $color in white, black, blue {
.#{$color}-font {
color: $color;
}
}
</style>
<div class="white-font"></div>
<div class="black-font"></div>
<div class="blue-font"></div>
```
## Solution
```html
<style type='text/sass'>
@each $color in blue, black, red { @each $color in blue, black, red {
.#{$color}-bg {background-color: $color;} .#{$color}-bg {background-color: $color;}
} }
@@ -16,6 +36,7 @@ title: Use @each to Map Over Items in a List
height: 200px; height: 200px;
width: 200px; width: 200px;
} }
</style> </style>
<div class="blue-bg"></div> <div class="blue-bg"></div>
@@ -23,7 +44,6 @@ title: Use @each to Map Over Items in a List
<div class="red-bg"></div> <div class="red-bg"></div>
``` ```
The solution above will generate the following CSS: The solution above will generate the following CSS:
```css ```css