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 andrewg
andrewg
7,157 Points

stuck on final sass challenge :(

Nothing I do is right and I've, unfortunately, spent a good portion of my day trying to figure out this ONE QUESTION. I really don't know why this isn't working, tbh. What's really frustrating about this is that I got through the other 5 questions without a problem, then I get to what SHOULD be the easiest one and I can't figure it out to save my life. Like, are you kidding me?? It's maddening! I have tried everything.

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

Voila! I did that! Except APPARENTLY I didn't.... can someone please help me understand what I am doing wrong/what I am not getting here?

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 square ($size, $color: black) {
  border: 1px solid $color;
  height: $size;
  width: $size;

}

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

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

2 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Andrew,

You have it, this is all you need.

Remove this.

 .#{$color}{

Just use

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

Hope this helps.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I was wondering why you have a background url

background: url ("images/#{$color}/#{$colors}.jpg")

And not

background: $color;
andrewg
andrewg
7,157 Points

I don't know why either. I guess I'm just very confused. But your solution really helped me on this one and I'm very grateful. Thank you.

shezazr
shezazr
8,275 Points
shezazr
shezazr
8,275 Points

why are you creating a rainbow mixin?

surely it will be something like create a one mixin that takes in an arguement and then uses that to set the color to that..

then the q says use this mixn to create CLASSES.. so not a rainbow.. but different classes

.red { mixin(red) // or however you call a mixin }

andrewg
andrewg
7,157 Points

yeah, um... i dont think thats gonna work....

Im not trying to create a rainbow mixin. Im trying to create an @include function which requires a name.. What else would I call it other than the name of the mixin. Hence, rainbow.

the previous questions had me title the mixin "rainbow". maybe thats what youre confused about