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
Elliott Mangham
13,086 PointsUsing @for loops in Sass
Can somebody please just clear this up for me, I'm trying to create a class named ".item_#{$i}" in Sass using loops. But I'm unsure on the best or proper way to write this.
Thanks in advance.
<!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>
/* Write your SCSS code below. */
@for .item_#{$i} from 1 through 3 {
width: $i * 100px;
}
3 Answers
Chris Shaw
26,676 PointsHi Elliott,
You have the right mindset but have misunderstood how the @for directive works in Sass, I'll break it down into it's fundamental structure first.
@for <assignment> from <expression> {
// Your code here
}
The assignment is always a variable that is passed from the expression, this variable is what you use within the loop to build your Sass code with which in this case is what you need it for, the expression on the other hand is how you want Sass to behave when executing the loop.
I'm not sure whether it was mentioned in the course but there are two main expressions you can use one of which can be confusing, the easier one to understand and it's what we're using here and that is through which counts from the first number and up to the second number so you get 1...2...3 instead of 1...2 which is what to does.
See the below Sass code for the final loop code.
@for $i from 1 through 3 {
.item_#{$i} {
width: $i * 100px;
}
}
Happy coding!
Elliott Mangham
13,086 PointsChris Upjohn, thank you for explaining that for me. I understand it better now, although task 2 is about @each.
Are you able to explain a little about that please? I'd really appreciate it!
The question reads: 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.
Update: I answered the task correctly, but a brief explanation would still be handy! Thanks.
Chris Shaw
26,676 PointsThe second task is slightly more confusing because of the way it's worded, I will admit it stumped me for a few seconds while I attempted to work it out but after re-reading it 10 times all it's actually asking for is a loop that iterates over a list of colours which in this case is red, blue, green.
If you remember to a previous video lists can be create using any one of the following techniques.
$colours: red, blue, green;
$colours: red blue green;
$colours: (red, blue, green);
$colours: (red blue green);
The final code the task is asking for is the below, it's similar to the previous task with the difference that the @each directive is been used now along with a list.
@each $color in red, blue, green {
.#{$color}_box {
background-color: $color;
}
}
Elliott Mangham
13,086 PointsChris, thanks again