Advanced Mixin Arguments Challenge 6 of 6

Question

Use the mixin we just wrote to create a series of classes for the colors: red, orange, yellow, and green.
Why is this not right?
@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; 
   }
  }
}
.box {
    @include rainbow(red, orange, yellow, green);
}
OUTPUT
.box {
  height: 10px;
  width: 10px;
  border: 1px solid red; }
.box .red {
  background: red; }
.box .yellow {
  background: yellow; }
.box .orange {
  background: orange; }
.box .green {
  background: green; }
Please Help!

Roderick Stotts · Answer

Michael, that did it. Worked like a charm thank you so much.

Michael Pare · Answer

This isn't working because you are declaring your mixin inside of .box. It will work if you declare your mixin in the scss stylesheet without including it in a selector. If you look at the index.html file, you will see that the color classes are not declared within .box elements, so the the styles you create by including the mixin within .box would have no effect on the output.

Welcome to the Treehouse Community

Looking to learn something new?

Roderick Stotts

Roderick Stotts

Advanced Mixin Arguments Challenge 6 of 6

2 Answers

Michael Pare

Michael Pare

Roderick Stotts

Roderick Stotts

Michael Pare

Michael Pare