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

Posted by Blake Bush
Blake Bush
5,009 Points

I need some help please.

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.

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
Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Blake,

All of your code should work for the second challenge. Your first challenge will fail because you're missing a }.

@for $i from 1 through 3 { .item_#{$i} { width:$i*100px; } }

You also don't need the commas in your list, so I'd write it like:

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

1 Answer

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Blake,

See if this gets you started:

@each $color in red blue green {
  ...
}
Blake Bush
Blake Bush
5,009 Points

Hi Tim, so this is where im at with the code 

@for $i from 1 through 3 { .item_#{$i} { width:$i*100px; }

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

i might have the first part incorrect but look at this what i have and see if you see something i dont.