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 Shelby Jamison
Shelby Jamison
Courses Plus Student 10,747 Points

I'm on the final code challenge for sass basics, yet I'm having trouble with the last task

I'm having problems with the final task of the sass basics advanced mixin arguments. Yet do not tell me the answer directly, hint at it.

index.html 
<!DOCTYPE html>
<html>
<head>
  <title>Sass Basics - Code Challenge</title>
  <link rel="stylesheet" type="text/css" href="page-style.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="box"></div>
  <div class="red"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</body>
</html>
style.scss 
/* Write your SCSS code below. */

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


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

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

dive{
@include rainbow($color);}

4 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Shelby,

Your mixin is creating rules for color classes, but in each class, you're giving them each four declarations with color properties.

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.

Also, when you call the rainbow mixin, pass in all the colors you want to use as arguments. Outside of the mixin, $color is not defined.

Finally, the dive { } wrapping rainbow needs more attention. I figure you meant div { } but that's wrong also. That would create a rule that looks like this:

div {
  .red {
    color: red;
  }
  etc.
}

Cheers

Gaylen Miller
Gaylen Miller
19,286 Points
Gaylen Miller
Gaylen Miller
19,286 Points

You're doing well. Your "square" mixin is great. Your box usage is great.

The first three lines of your rainbow mixin are correct. It's only the last line "color: red; color: yellow;..." this is incorrect. There is too much there. All you need on that line is to set the background color to the $color variable that is coming from your @each loop.

Shelby Jamison
PLUS
Shelby Jamison
Courses Plus Student 10,747 Points
Shelby Jamison
Shelby Jamison
Courses Plus Student 10,747 Points

Thank you both, may god bless you.

Shelby Jamison
PLUS
Shelby Jamison
Courses Plus Student 10,747 Points
Shelby Jamison
Shelby Jamison
Courses Plus Student 10,747 Points

I found the answer and my first run through web design is done!

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Excellent! :)