Learn

Beyond the simple math and color transformations we explored in the previous exercises, Sass also allows for more complex functions.

Each loops in Sass iterate on each of the values on a list. The syntax is as follows:

@each $item in $list {
  //some rules and or conditions
}

The value of $item is dynamically assigned to the value of the object in the list according to its position and the iteration of the loop.

In main.scss write an @each loop to assign the background-color of the class based on the items in $list:

@each $item in $list {
  .#{$item} {
    background: $item;
  }
}

Click “Run” to see your changes in the browser and inspect them in the output of main.css.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?