Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Use an @each loop to set the variable $color to the color red, then blue, and finally green. Use the loop to create thre

i dont know what to do

index.html
<!DOCTYPE html>
<html>
<head>
  <title>Sass Basics - Code Challenge</title>
  <link rel="stylesheet" type="text/css" href="page-style.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="item_1 red_box"></div>
  <div class="item_2 blue_box"></div>
  <div class="item_3 green_box"></div>
</body>
</html>
style.scss
@for $i from 1 through 3 { .item_#{$i} { width:$i*100px; }

}

.for-1 {
  width: 61px;
}

.for-2 {
  width: 62px;
}

.for-3 {
  width: 63px;
}

1 Answer

Tobias Helmrich
Tobias Helmrich
31,601 Points

Hey there,

you have to use an each loop and loop through a list containing the three specified colors (red, blue and green), so basically it's just three comma-separated values, and save the value inside of a $color variable.

Inside of the each loop you have to select a class that's called red/blue/green_box depending on the value of $color in the iteration. Don't forget to interpolate the variable when you select the class.

Inside of the rule you now just have to assign the current value of the $color variable to the background-color property of the corresponding class.

Here is the working code for the second task.

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

I hope that helps, good luck! :)