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 (’).
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!!
I’m glad I could help. Happy coding!
1 Like