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 Kathryn Notson
Kathryn Notson
25,941 Points

Sass Basics: Advanced Mixins

I'm stuck on the last quiz question. Here's my code.

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="box"></div>
  <div class="red"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</body>
</html>
style.scss 
/* Write your SCSS code below. */
@mixin square ($size, $color: black) {
  height: $size;
  width: $size;
  border: 1px solid $color;
}
.box {
  @include square ($size: 10px, $color: red);
}
.box {
  @include square ($color: red, $size: 10px);
}
@mixin rainbow ($colors...) {
  @each $color in $colors {
    .color.#{$color} {
      background: $color;
    }
  }
}
@mixin rainbow ($color) {
  @each $color in red, orange, yellow, green {
   .color.#{$color} {
      background: $color;
    }
  }
}
.div {
  @include rainbow ($color: red);
}

3 Answers

Joel Bardsley
Joel Bardsley
31,246 Points
Joel Bardsley
Joel Bardsley
31,246 Points

Hi Kathryn,

You're not far off. Firstly, the question didn't specify creating divs with classes of the colors in the rainbow mixin, just general classes. Also, without wanting to give away the answer, remember the rainbow mixin accepts any number of arguments, ie (color1, color2, color3)

Kathryn Notson
Kathryn Notson
25,941 Points

Joel Bardsley:

If my code is "@mixin rainbow ($colors...)" it give me a "Bummer!" message about the div. I eliminated my ".div" class from my code. I also tried "...($color 1, etc.)." I still get a "Bummer!" message about the div. I don't know what I'm missing in my code.

Joel Bardsley
Joel Bardsley
31,246 Points
Joel Bardsley
Joel Bardsley
31,246 Points

In your mixin, from the previous stage, you've already successfully set ($colors...) as your accepted arguments. So when you @include the mixin all you need to do is supply the colors the question asks for. If the question asked you to use the mixin to set red, white and blue classes, you'd do:

@include rainbow(red, white, blue);

Hope that helps. If it isn't clear to you why the above works, let me know.

Kathryn Notson
Kathryn Notson
25,941 Points

Joel Bardsley:

If I don't change my "@mixin rainbow ($colors..)...@each $color in red..."and my "@include rainbow" includes the 4 colors, it still doesn't work.

Kathryn Notson
Kathryn Notson
25,941 Points
Kathryn Notson
Kathryn Notson
25,941 Points

Joel: Bardsley:

Halleluyah! I figured it out! I was missing some syntax marks!