Creating Loops challenge 1 of 2

You're almost there Ben! When you're using a SASS variable you only need to surround the variable name with #{ } when you're using that variable in a selector or property name. This is called interpolation. For example, in your code above, you must use the interpolation syntax to use the variable in a selector name:

.item_#{$i}

Say the variable $i is equal to 1, then SASS would spit out

.item_1

You don't need to use interpolation if you're just using the variable by itself or in an equation, for example when calculating the width of an element:

width: $i * 100px;

In other words, the final answer looks like this:

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

Technically, your answer is correct, SASS would convert the interpolated variable correctly. However, that won't pass the code challenge and it's best practice to only use interpolation when needed (to create selector or property values).

You're creating nth-child selectors (cool idea), but that's not what the code challenge is asking for. You want to end up with 3 separate classes like this

.item_#1 {  
   width: 100px;
}
.item_#2 {  
   width: 200px;
}
.item_#3 {  
   width: 300px;
}

Ok let me try some stuff.

I don't know why I absolutely made it harder than it was, but I got it. Thank you Dave!

I have written this code:

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

And it doesn't work. Not sure where I went wrong. :/

Great explanation Dave! I was a bit confused at the beginning but your comment regarding interpolation helped me to see what i was doing wrong. I was enclosing the # sign inside parenthesis .item_(#{$i}) { then I realized the was no need to use the parenthesis.

Thanks!

I finally got this answer, but I don't understand why I had to specify the items and their widths, and then make a @for rule. Isn't this redundant?

.item_1 { width: 100px } .item_2 { width: 200px }

.item_3 { width: 300px; }

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

This worked for me:

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