Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics (retired) Advanced Sass Concepts Creating Loops with @for and @each

Elizabeth Mawer
Elizabeth Mawer
9,554 Points
Posted by Elizabeth Mawer
Elizabeth Mawer
9,554 Points

Sass code

Use an @each loop to set the variable $color to the color red, then blue, and finally green. Use the loop to create three classes: .red_box, .blue_box, and .green_box. The background color for each class should be set to the corresponding color.

@each $color in red, blue, green {
      .red_box {
           background color: ($color)
          .blue_box {
                background color: ($color)
                .green_box {
                       background color: ($color)
                }
           }
       }
 }

Can someone please correct me!!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Elizabeth.

I added some code markdown so we can see your code a little better :)

I'm not sure about the answer though, it's been too long since I did any Sass.

Try putting each of the classes so they're siblings of each other?

@each $color in red, blue, green {
      .red_box {
           background color: ($color)
      }
      .blue_box {
                background color: ($color)
      }
      .green_box {
                background color: ($color)
      }

1 Answer

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

Hey Elizabeth, each time your loop go through a item in the list red, blue, green it will store the value in the $color variable, for example the first time, red will be stored in $color, so you just create a class using the variable name and set the background-color using the same variable.

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

Every time the loop runs it will create a class with the value of the variable and set the background-color to the same value

Elizabeth Mawer
Elizabeth Mawer
9,554 Points
Elizabeth Mawer
Elizabeth Mawer
9,554 Points

Thank you for your help. Also thanks for the explanation of why it is laid out that way.