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 Sass Basics (retired) Advanced Sass Concepts Advanced Mixin Arguments

Posted by Misty Majewski
Misty Majewski
5,276 Points

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

@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;}
            }
            }
 .red {
  @include rainbow (red);}

Use the mixin we just wrote to create a series of classes for the colors: red, orange, yellow and green. It says Bummer! The <div> with the class .red should have a red background. Did you use red as a parameter when including the rainbow mixin? Not sure what I am missing?

James Barnett
James Barnett
39,199 Points

Misty Majewski - I was just looking through recent CSS threads. You are 3 for 3 on answering your own questions, rock on :guitar:

5 Answers

Misty Majewski
Misty Majewski
5,276 Points

Finally figured out what I was doing wrong. Did not realize that @include could stand alone. Thought it had to be with a div or class. Finally passed.

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

@mixin rainbow($colors...){ 
    @each $color in $colors{ 
        .#{$color} { 
            background: #{$color}; /* My problem was on this line*/  
        } 
    } 
}
@include rainbow(red, blue, green, yellow);

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

}
Aaron Smith
Aaron Smith
9,914 Points
Aaron Smith
Aaron Smith
9,914 Points

I figured out what was wrong with this task you should use the class selectors .red, . Orange, .yellow, and .blue, inside those selectors you should put the @include rainbow (color); Background: color; use that for each color. I did it and it passed perfectly .red { @include rainbow (red); Background: Red;}

.orange { @include rainbow (orange); Background: orange;}

.yellow { @include rainbow (yellow); Background: yellow;}

.green { @include rainbow (green); Background: green;}

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Aaron;

Doesn't your solution violate the DRY concept Mr. Catlin is trying to avoid?

Ken

Michelle Pepe
PLUS
Michelle Pepe
Courses Plus Student 6,125 Points
Michelle Pepe
Michelle Pepe
Courses Plus Student 6,125 Points

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

@mixin rainbow($colors...){ @each $color in $colors{ .#{$color} { background: #{$color}; /* My problem was on this line*/
} } } @include rainbow(red, orange, yellow, green);

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

}

Vipin Singh
Vipin Singh
15,268 Points
Vipin Singh
Vipin Singh
15,268 Points

Here is all 1 to 6 task answer

/* Write your SCSS code below. */

@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; } 
  }
}
@include rainbow (red, orange, yellow, green);
ellie adam
ellie adam
26,377 Points
ellie adam
ellie adam
26,377 Points

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