Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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!

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

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