Sass Final Exercise question 6 of 6

@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: $colors; 
        } 
    } 
}

@include rainbow(red);
@include rainbow(orange);
@include rainbow(yellow);
@include rainbow(green);

i think it is a but in excercise.

Have you included the mixin?

"Use the mixin we just wrote to create a series of classes for the colors: red, orange, yellow, and green."

@include rainbow (......etc);

Have you tried running this in your own text editor outside of the challenge? Currently it doesn't output anything in the .css file as the whole thing is still inside the original curly brackets forming the mixin. I have put some notes in the code to help guide you as there are a few mistakes here.

I would recommend playing around with it outside of the code challenge until you get it to compile to the desired results as it will be quicker than running the preview there over and over.

//rainbow 

@mixin rainbow($colors...) { /* this curly bracket closes all the way at the bottom, is that correct? */
    @each $color in $colors { 
        .#{$color} { 
            background: $colors; /* $colors is the whole group not just one */      
        } 
    } 

    .#{$color} {   /*do you need this line again? */
        @include rainbow(red, orange, yellow, green);  /* this line should be on it's own outside of the mixin, check your curly brackets, you are still inside the mixin declaration */
        } 
    } /* end of the very first curly bracket */

Could you post the full code you are using to answer the question?

Here's everything I have in the code editor

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

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

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

@include rainbow(red, orange, yellow, green);

Any chance you can share in what your solution was Pablo? I am stuck on the same section and it is driving me insane!

It's all good my friend. I'm still curious as to what your solution was? I ended up@including each color and it finally passed. Not sure if that is the correct way or not but it works.

Please post the full code!i can't get this hell thing right...It's been tow days I'm trying to solve this question.Help!

Thanks :)

Full code is here:

hope it helps =)

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

@include rainbow(red, orange, yellow, green);

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

Hi Tom, thanks for the quick reply.

Yes I have included it.

I've tried several solution, I'm sure it's right there in front of me.

Safari just crashed, And I have to restart all the exercises for the 6th chapter. It's currently past 4Am over here.

I'll post them again when I get to the 6th question. For now I go to bed and catch up on some sleep.

Thanks again for taking the time Tom.

Go get some sleep!

Here's the last version I tried

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

In my code editor the output I get is .box{height:10px;width:10px;border:1px solid red} .red,orange,#ff0,green{background:red,orange,#ff0,green} .red,orange,#ff0,green{background:red,orange,#ff0,green} .red,orange,#ff0,green{background:red,orange,#ff0,green} .red,orange,#ff0,green{background:red,orange,#ff0,green}

Finally got it. Thanks Tom.

I really appreciate the help.

Figured it out! Woohoo!

Hey Tim, Just got your message, glad you figured it out man.

Help with this please: Use the mixin we just wrote to create a series of classes for the colors: red, orange, yellow, and green

Stuck here too! Please help!

Stuck here too! Please help!

task 6 of 6 stage 4 i am struck please give me the correct code for this task @mixin square ($size, $color: black) { height: $size; width: $size; border: 1px solid $color; } @mixin rainbow($colors: red,orange,yellow,green); { @each $color in $colors { .#{$color} { background: $colors; } }

.#{$color} { @include rainbow(red, orange, yellow, green); }

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

yes i think it is a bug

just make 4 individual @includes and it will get 'er done! Thanks to Pawel for sharing!

I hope this helps, this worked for me after a while (this is just the rainbow mixin part):

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

@include rainbow(red, orange, yellow, green);

(for me, I had put down: @each $color in $colors { .colors.#{$color}{background.$color;} but this is wrong because my classes were listed as .color.red, etc.. instead of .red, .orange etc...)

Hope this helps!

why is passing of arguments in list type not working i am confused is it a bug ?

@include rainbow(red orange yellow green);