# freeCodeCamp Challenge Guide: Use @each to Map Over Items in a List

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-each-to-map-over-items-in-a-list/301461>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [August 3, 2019, 1:03pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-each-to-map-over-items-in-a-list/301461 "2019-08-03T13:03:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [August 3, 2019, 1:03pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-each-to-map-over-items-in-a-list/301461/1 "2019-08-03T13:03:59Z")

</div>

# [Use @each to Map Over Items in a List](https://www.freecodecamp.org/learn/front-end-libraries/sass/use-each-to-map-over-items-in-a-list)

* * *

## Problem Explanation

The @each directive loops over a list and for each iteration the variable is assigned the value in the list.

**Example:**

```html
<style type='text/scss'>
  
@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>

```

* * *

## Solutions

> **Solution 1 (Click to Show/Hide)**
>
> ```html
> <style type='text/scss'>
> 
> @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>
> 
> ```
> 
> The solution above will generate the following CSS:
> 
> ```css
> .blue-bg {
> background-color: blue;
> }
>  
> .black-bg {
> background-color: black;
> }
>  
> .red-bg {
> background-color: red;
> }
>  
> div {
> height: 200px;
> width: 200px;
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 8, 2025, 3:58pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-each-to-map-over-items-in-a-list/301461/2 "2025-01-08T15:58:16Z")

</div>