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 MUZ140014 Justice Gwatidzo
MUZ140014 Justice Gwatidzo
11,920 Points

Make a @for loop to iterate through the numbers 1 through 3. The for loop should create classes named in the format "ite

im really freaked out with this whats the code guys

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. */

3 Answers

Sean Do
Sean Do
11,933 Points
Sean Do
Sean Do
11,933 Points

Here's an example from the Sass/Scss documentation.

$class-slug: for !default;

@for $i from 1 through 4{
  .#{$class-slug}-#{$i} {
    width: 60px + $i
    }
}

Which emits this CSS

.for-1 {
  width: 61px;
}

.for-2 {
  width: 62px;
}

.for-3 {
  width: 63px;
}

.for-4 {
  width: 64px;
}
MUZ140014 Justice Gwatidzo
MUZ140014 Justice Gwatidzo
11,920 Points

what about the correct code for that challenge..me i wrote this ....$class-item_#{$i}: for !default;

@for $i from 1 through 3{ .#{$class-item_#{$i}} { width: 100px + $i } } and its giving me a bummer"There's something wrong with your Sass stylesheet. Please review your code and try again. Sass Error: Invalid CSS after "$class-item_": expected ":", was "#{$i}: for !def..."

MUZ140014 Justice Gwatidzo
MUZ140014 Justice Gwatidzo
11,920 Points

what about the correct code for that challenge..me i wrote this ....$class-item_#{$i}: for !default;

@for $i from 1 through 3{ .#{$class-item_#{$i}} { width: 100px + $i } } and its giving me a bummer"There's something wrong with your Sass stylesheet. Please review your code and try again. Sass Error: Invalid CSS after "$class-item_": expected ":", was "#{$i}: for !def..."

Randy Gilliam
Randy Gilliam
6,528 Points
Randy Gilliam
Randy Gilliam
6,528 Points

I have been stumped on this question for days. Any help would be great! PLEASE HELP!!!!

$class-item: for !default; @for $i from 1 through 3{ .#{$item_#}-#{$i} { width: 100px + $i; }}

And I get this error: There's something wrong with your Sass stylesheet. Please review your code and try again. Sass Error: Invalid CSS after " .#{$item_": expected "}", was "#}-#{$i} {"

Randy Gilliam
Randy Gilliam
6,528 Points
Randy Gilliam
Randy Gilliam
6,528 Points

I've gotten further than I was and now have a new error, any help?

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

And my new error is: Bummer! There should be an .item_1 class with a width of 100px. Did you set up the loop correctly?

What am I missing?

Randy Gilliam
Randy Gilliam
6,528 Points
Randy Gilliam
Randy Gilliam
6,528 Points

Had to change "for" to "item" and it worked.

$class-item: item !default; @for $i from 1 through 3 { .#{$class-item}_#{$i} { width: 100px * $i; }}

Lucena Parker
Lucena Parker
7,343 Points
Lucena Parker
Lucena Parker
7,343 Points

This is worked for me, Happy coding!

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

}