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

CSS Sass Basics (retired) Advanced Sass Concepts Advanced Mixin Arguments

Posted by Daniele Manca
Daniele Manca
10,986 Points

Unable to complete task

Am trying to spot the error within my code without any success. If anyone would lend me a hand I would appreciate it.

@mixin rainbow ($name, $colors...) {
  @each $color in $colors {
      .#{$name}.#{$color} {
        background: #{$color};
      }
    }
}
mikes02
mikes02
Courses Plus Student 16,968 Points

Hi Ben, I edited your question just to fix the code formatting. If you need help with code formatting in the future the Markdown Cheatsheet is very handy.

1 Answer

mikes02
mikes02
Courses Plus Student 16,968 Points

There's a few areas where you are making mistakes

  • There is no need for a $name variable because the color itself will be the class name, we want our rainbow mixin to simply accept any assortment of colors we throw at it.
  • Because we want our mixin to accept numerous colors we use the $colors variable but we also add the ... at the end. The ... creates what is called an argslist, short for arguments list, which allows us to pass any number of arguments to our mixin as we wish, example: red, green, yellow, orange, black, blue would be just as valid as red, green, blue.
  • Because we don't need the $name variable you can remove that from your class name and just use $color and that will be the appropriate method within the @each loop.
  • Finally, set the background-color to the $color
@mixin rainbow($colors...) {
  @each $color in $colors {
    .#{$color} {
      background-color: $color;
    }
  }
}

So now if you did

@include rainbow(red, green, yellow);

you would get

.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}