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

Shawn Mathew
Shawn Mathew
6,574 Points
Posted by Shawn Mathew
Shawn Mathew
6,574 Points

Last question on Sass Basics - Getting Error

Hello,

I'm getting an error for the last question on the Sass Basics course. My code:

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

div { @include rainbow(red, orange, yellow, green) }

I keep getting the error "div with class red should hv backgroung of red. Did you include red in your parameters?"

This code works in my editor, not sure what the problem is here, thanks.

4 Answers

Adrian Melendez
Adrian Melendez
5,555 Points
Adrian Melendez
Adrian Melendez
5,555 Points

You need to use @include

/* Write your SCSS code below. */
@mixin square($size, $color: black) {
  height: $size;
  width: $size;
  border: 1px solid $color;
}

.box {
    @include square($color: red, $size: 10px);
}

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

@include rainbow(red, orange, yellow, green);
Shawn Mathew
Shawn Mathew
6,574 Points
Shawn Mathew
Shawn Mathew
6,574 Points

Thanks Adrian! I did use @include and called it on a div:

div { @include rainbow(red, orange, yellow, green) }

For some reason this kept giving me the error I mentioned in the original post. I tried it as you had it, w/o calling the mixin on a selector and it worked. Not sure why it doesn't work when called on a selector though.

Thanks for your help!

Adrian Melendez
Adrian Melendez
5,555 Points
Adrian Melendez
Adrian Melendez
5,555 Points

The rainbow mixin creates class selectors. When you wrote:

div {
  @include rainbow(red, orange, yellow, green);
}
// I broke it up onto several lines because I can't stand ugly formatting

the CSS output was:

div .red {
  background: red;
}

div .orange {
  background: orange;
}

div .yellow {
  background: yellow;
}

div .green {
  background: green;
}

That is incorrect because it only selects elements with the color classes (.red, .orange, etc.) that are inside other div elements. The goal is to select all elements with color classes so the Sass code should look like:

@include rainbow(red, orange, yellow, green);

which will make the CSS output:

.red {
  background: red;
}

.orange {
  background: orange;
}

.yellow {
  background: yellow;
}

.green {
  background: green;
}

Your code would not affect div elements such as:

<body>
  <div class="red"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</body>

because those divs aren't inside other divs. The code I wrote would affect them.

Shawn Mathew
Shawn Mathew
6,574 Points
Shawn Mathew
Shawn Mathew
6,574 Points

Ahha, that clears things up for me. Thank you!