Use an @each loop to set the variable $color to the color red, then blue, and finally green. Use the loop to create thre

Question

i dont know what to do

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

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

}

.for-1 {
  width: 61px;
}

.for-2 {
  width: 62px;
}

.for-3 {
  width: 63px;
}

Answer 1 · 2016-02-13T16:41:51Z

February 13, 2016 4:41pm

Hey there,

you have to use an each loop and loop through a list containing the three specified colors (red, blue and green), so basically it's just three comma-separated values, and save the value inside of a $color variable.

Inside of the each loop you have to select a class that's called red/blue/green_box depending on the value of $color in the iteration. Don't forget to interpolate the variable when you select the class.

Inside of the rule you now just have to assign the current value of the $color variable to the background-color property of the corresponding class.

Here is the working code for the second task.

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

I hope that helps, good luck! :)

Welcome to the Treehouse Community

Looking to learn something new?

Joshua szkodlarski

Joshua szkodlarski

Use an @each loop to set the variable $color to the color red, then blue, and finally green. Use the loop to create thre

1 Answer

Tobias Helmrich

Tobias Helmrich