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 Kathryn Notson
Kathryn Notson
25,941 Points

Sass Basics: Creating Loops with @for & @each

I don't know how to complete the @each function. The instructor didn't complete his thought on it in the video (5:20-5:45).

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 
/* Write your SCSS code below. */
item_1 {
  width: 100px;
}
@for $i from 1 through 3 {
  .item_#{$i} {
    width: $i * 100px;
  }
}

@each $color in red, blue, green {
  @include color_class($color) {
    background: $color;
    }
}
Kathryn Notson
Kathryn Notson
25,941 Points

I finally figured it out on my own!

1 Answer

Gaylen Miller
Gaylen Miller
19,286 Points

Hi,

If you are having trouble getting the challenges right for SASS, I would recommend going to sassmeister.com/. They have a great area to allow input and show you what it generates.

I think you need something like what's below.

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

It generates this.

/* Write your SCSS code below. */
.red_box {
  background: red;
}

.blue_box {
  background: blue;
}

.green_box {
  background: green;
}
Kathryn Notson
Kathryn Notson
25,941 Points

Yes, I looked at that briefly, but I didn't use it to answer the question. I managed to think the quiz question through on my own. I wrote down the correct answer in my notes!

What I was missing was the underline after ".#{$color}" & eliminated the "@include" function. I just had to play around with the arrangement for a while. I knew what the CSS output was supposed to look like.