SASS - Use @each to Map Over Items in a List

HTML-CSS
1

Tell us what’s happening:

I only found the solution by through the ‘Get Help’ button that links to the forums, but I don’t understand the syntax nor the concept. Would someone explain this to me?

Your code so far

<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>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

SASS - Use @each to Map Over Items in a List

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.