Sass: Use @each to Map Over Items in a List (Stuck on this!)

Major issues with this lesson! I tried Chrome, Firefox, and Edge but no results

Lesson: https://www.freecodecamp.org/learn/front-end-libraries/sass/use-each-to-map-over-items-in-a-list

My Code:

<style type='text/sass'>
@each $color in blue, black, red {
  .#{$color}-bg {background-color: $color;}
       }
}

  div {
    height: 200px;
    width: 200px;
  }
</style>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thanks for the Update!

It looks like you have an extra } in your code.

Sorry that was a Typo… removing the Bracket will not clear the Sass

With the extra bracket removed, your code passes the tests. Is your browser up-to-date? Do you have any browser extensions running (such as an adblocker or a color theme, perhaps)?

I used this code and several different browsers

<style type='text/sass'>

  div {
    height: 200px;
    width: 200px;
  }

  @each $color in blue, black, red {
    .#{$color}-bg {background-color: $color;}
  }

</style>

<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>

I have used different sass variations for several hours

I just noticed that you changed the first line from

<style type='text/scss'>

to

<style type='text/sass'>

You should not change any of the existing code, only add the @each loop.

Didn’t noticed that thanks! ArieLeslie… Thanks for taking the time to help!! :smiley:

I’m glad I could help. Happy coding!

1 Like