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

Todd Squitieri
Todd Squitieri
8,001 Points
Posted by Todd Squitieri
Todd Squitieri
8,001 Points

Creating a loop that will set background equal to color class

I have a question about this particular SASS-related challenge. One of the instructions is to have me create an @each loop with defined classes: .red_box, .blue_box, and .green_box. It wants the background to be set to the corresponding color in each class. My mind is drawing a blank...

This is what I thought would get that result:

/* Write your SCSS code below. */
@for $i from 1 through 3 {
  .item_#{$i} {
    width: $i * 100px;
  }
}

@each $color in red, blue, green{
  @include color_class($color)
}

But I'm not sure why this wouldn't work. Where am I supposed to be creating these $color_box classes and how do I populate them with corresponding colors?

Any information or assistance would be much, much appreciated!

Thanks so much in advance!

Sincerely,

Todd

4 Answers

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Hi Todd. The challenge says you should use the loop to create 3 classes with the names given. You haven't fix those classes yet. Also the include you have added to change the background, doesn't really do that. Since you have nicely done the for each loop like this

@each $color in red, blue, green{

}

now create the 3 classes with the help of the variable color, interpolation and the loop

@each $color in red, blue, green{

  .#{$color}_box{
     /* Now try changing the background color 
         accordingly */
  }

}

I have left the last part for you to try by filling in the comments with the line needed to change the background. I hope this helped.

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Hi again Gloria,

Thanks for the reply. The curly brace was missing, but when I added it, I still received similar messages about not setting up my loop correctly.

I changed background to background-color, but it was still sending me the same loop-related error message. I'm so convinced that this problem is so minute that I am just not noticing it at all. Haha!

Any other ideas??

Thanks so much again, Gloria!!

Sincerely,

Todd

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Oops I just saw it XD

hey you wrote this

.color#{$color}_box{

check what I wrote above.

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Oh my god, LOL! See?? I knew it! A silly mistake!!

Thank you so much, Gloria, for your patience with my stupidity!! Hahaha. Appreciate it!

Sincerely,

Todd

p.s.

Problem solved! XD

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

You are welcome Todd. You are not stupid, that how petty coding mistakes are; they can ruin everything ha ha. Good luck on the rest of the course.

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Hi Gloria,

Thank you so much for taking the time to reply to my queries in full. I appreciate the step-by-step instructions.

I am still having a little difficulty with the last part. Here's what I tried using to make the background match the different color classes:

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

}

According to SitePoint, I should use the $color tag to fix this problem, but apparently the Challenge doesn't accept it as a legitimate command.

Sorry to make you spoon feed here, but any recommendations would be awesome.

Thanks so much again,

Todd

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

No worries Todd, it's my pleasure. I think you are missing a brace in the end. Does it exist but you forgot to paste it?

Another thing...

Edit: change background to background-color (it is not wrong to write background but if you had a long code and had to change properties like background-image, it will save you the confusion.)