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

Gemma Weirs
Gemma Weirs
15,054 Points
Posted by Gemma Weirs
Gemma Weirs
15,054 Points

@each and @for Code Challenge - I keep getting a weird error

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

Instructions: 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.

Error: Bummer! There's something wrong with your Sass stylesheet. Please review your code and try again. Sass Error: #ff0000 is not an integer.

I'm really confused. Can you help?

2 Answers

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

You don't need the @for loop in there. Other than that, everything looks great!

EDIT: The @each loop goes through each item of a list (or map), storing that item in a temporary variable. The @for loop takes a range of numbers (from 3 through 5, for instance), goes through each number in the range, and stores it in a temporary variable.

So @each is used for lists and maps only, and @for is used for numbers only.

The below loops all have the exact same behavior:

@each $num in 1, 2, 3, 4, 5 { // a list of numbers
  // your code here
}

@each $num in 1 2 3 4 5 { // also a list of numbers
  // your code here
}

@for $num from 1 through 5 { // a range
  // your code here
}

@for $num from 1 to 6 { // also a range, and equivalent to the one above
  // your code here
}

EDIT 2: Clarity.

Gemma Weirs
Gemma Weirs
15,054 Points
Gemma Weirs
Gemma Weirs
15,054 Points

Thanks for clarifying.

I now have this:

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

and it passed.

Gavin Eyquem
seal-mask
.a{fill-rule:evenodd;}techdegree
Gavin Eyquem
Front End Web Development Techdegree Student 21,339 Points
Gavin Eyquem
.a{fill-rule:evenodd;}techdegree
Gavin Eyquem
Front End Web Development Techdegree Student 21,339 Points

Where am I going wrong with this? I've tried different ways and no success.

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