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 J T
J T
19,878 Points

Sass Help

This isn't working. Any idea why?

Design a mixin (called "rainbow") that can take any number of colors via the argument "$colors...". Within the mixin, use the loop "@each $color in $colors" to create a class named after each color, and set its background to the corresponding color.

/* Write your SCSS code below. */

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

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

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

Any help is greatly appreciated :)

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Josh Trommel,

You're missing the $ in .#{color} :)

J T
J T
19,878 Points

Thanks, that fixed it :)

6 Answers

Matias Valenzuela
Matias Valenzuela
7,554 Points
Matias Valenzuela
Matias Valenzuela
7,554 Points

It didn't work for me either: 

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

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

.box {
  @include square($color: red, $size: 10px);
}
Matias Valenzuela
Matias Valenzuela
7,554 Points

My bad, I had the color in parenthesis instead of curly braces {$color}

Nuno Sarmento
Nuno Sarmento
4,400 Points
Nuno Sarmento
Nuno Sarmento
4,400 Points

Here we go:

/* 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; } } }

Anika Jaffara
Anika Jaffara
20,364 Points
Anika Jaffara
Anika Jaffara
20,364 Points

Wow... that DIDN'T work for me. Not sure why. If fact, it green-lights it... then red-lights it. :/

MUZ140108 Samantha N. Tozivepi
MUZ140108 Samantha N. Tozivepi
9,659 Points
MUZ140108 Samantha N. Tozivepi
MUZ140108 Samantha N. Tozivepi
9,659 Points

@mixin rainbow($colors...) { ---- }

MUZ140112 Simon Chatikita
MUZ140112 Simon Chatikita
4,174 Points
MUZ140112 Simon Chatikita
MUZ140112 Simon Chatikita
4,174 Points

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

@mixin rainbow($colors...) { @each $color in $colors { .#{color} { background: $color; } } } .box { @include square($color: red, $size: 10px); }

MUZ140112 Simon Chatikita
MUZ140112 Simon Chatikita
4,174 Points
MUZ140112 Simon Chatikita
MUZ140112 Simon Chatikita
4,174 Points

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

@mixin rainbow($colors...) { @each $color in $colors { .#{color} { background: $color; } } } .box { @include square($color: red, $size: 10px); }

Ashok Anumandla
Ashok Anumandla
2,163 Points

The below code works fine..!!!

@mixin square($size,$color:black){ width:$size; height:$size; border: 1px solid $color; } .box{ @include square($color:red,$size:10px); } @mixin rainbow($colors...) { @each $color in $colors { .#{$color} { background: $color; } } }