whats wrong here?: advanced sass concepts 6 of 6

Question

http://teamtreehouse.com/library/advanced-mixin-arguments
Challenge task 6 of 6
Use the mixin we just wrote to create a series of classes for the colors: red, orange, yellow, and green.
/* 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;
    }
  }
}
div {
@include rainbow (red, orange, yellow, green);
}

Chris Shaw · Accepted Answer

Hi dvlr,
It would appear you're missing the ampersand before your selector, simply try the following.
scss
&.#{$color} {
    background: $color;
}

peterdemain · Answer

@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; } } }
div { @include rainbow (red, orange, yellow, green); }
thanks you guys

Welcome to the Treehouse Community

Looking to learn something new?

dvir novak

dvir novak

whats wrong here?: advanced sass concepts 6 of 6

2 Answers

Chris Shaw

Chris Shaw

dvir novak

dvir novak

peterdemain

peterdemain