another sass code challenge: Design a mixin (called "rainbow") that can take any number of colors

Marty;

This one can be a bit of a challenge. Let's have a look...

Task 5

Design a mixin (called "rainbow") that can take any number of colors via the argument $colors.... Within the mixin, use the loop @each $color in $colors to create a class named after each color, and set its background to the corresponding color.

Not seeing code that you have tried, I'll take this step by step.

@mixin rainbow($colors...) {}

When you use ... in the signature, Sass knows that it is an arglist for $colors and allows you to input a list of colors.

@mixin rainbow($colors...) {
    @each $color in $colors {
        // Do stuff
    }
}

Setting up the @each loop to go through each of the colors in our arglist and assign it to the $color variable.

@mixin rainbow($colors...) {
    @each $color in $colors {
        .#{$color} {
           // set our styling
        }
    }
}

Target and create our classes with color names.

@mixin rainbow($colors...) {
  @each $color in $colors {
    .#{$color} {
          background: $color; } 
  }
}

Now if we do an @include rainbow(blue, green, red, brown) Sass will generate for us:

.blue {
  background: blue;
}

.green {
  background: green;
}

.red {
  background: red;
}

.brown {
  background: brown;
}

Hope it helps. Post back if you are still stuck.

Happy coding,
Ken