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

Posted by Ted Moxon
Ted Moxon
18,203 Points

Sass Final exam Challenge 6 of 6

Ok weird problem here.I have run this two ways through Sublime text. It outputs correctly like this

@mixin square ($size, $color: black) {
    height: $size;
  width: $size;
  border: 1px solid $color;
  }

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


@include rainbow(red orange yellow green);

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

}

but if i put ... in @mixin rainbow($color) it doesn't output correctly what gives?

Hampton Catlin or Guil Hernandez or anybody that knows what is going on here?

1 Answer

Rolando Ponce de León
Rolando Ponce de León
9,585 Points
Rolando Ponce de León
Rolando Ponce de León
9,585 Points

Ted, I think the problem might be in the syntax, you are missing the periods "..." after the argument $colors and the comma separators between the colors in your @include. Look at the following code and see what I mean

@mixin rainbow($colors...){
    @each $color in $colors {
    .#{$color} {
        background: $color;
    }
  }
}
@include rainbow(red, orange, yellow, green);

I hope this helps, try it and see if it works