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

Todd Squitieri
Todd Squitieri
8,001 Points
Posted by Todd Squitieri
Todd Squitieri
8,001 Points

Making Different Color Classes with SASS

Stuck on yet another challenge. I'm asked to use the Rainbow mixin to make separate classes for red, orange, yellow, and green. Here's what I came up with:

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

$color: black;
$size: 10px;


.box {
  @include square($color: red, $size: 10px);
   height: $size;
   width: $size;
   border: 1px solid red;
}

@mixin rainbow($name, $colors...){
  @each $color in $colors{
    .#{$name}.#{$color}{
    bakground: url("images/#{$name}/#{$color}.jpg")
    }

  }


}

@include rainbow(red orange yellow green);

I keep getting an error that there is a certain undefined variable.

As usual, any help would be great!

Thanks so much in advance,

Todd

2 Answers

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

Todd;

The instructions for this task are:

Design a mixin (called "rainbow") that can take any number of colors via the argument $colors.... 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.

So, in your code you have defined the rainbow mixin, but have included a $name variable in it, which the task is not wanting. That is likely your "undefined variable" error. The task also isn't asking for a background image to be utilized, just setting a background color. So, the code would look like:

/*  Course: SASS Basics
**  Module: Advanced Sass Concepts
**  Challenge: Advanced Mixin Arguments
**  Task 5: Rainbow Mixin 
*/

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

Does that make any sense?

Happy coding,

Ken

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Hi ken!

I think what's tripping me up here is the @each line. I'm not sure what the $color variable is doing with respect to the $colors variable next to it.

Why are we even adding a $color when it hasn't even been defined??

I mean, wouldn't you first add something like this

'''css $color: red; '''

before adding a $color variable to the rainbow mixin?

Err... maybe I'm thinking too hard about this.

Any clarity would be much appreciated.

Thanks so much!

Sincerely,

Todd

MUZ140131 Maxwell Maja
MUZ140131 Maxwell Maja
10,327 Points
MUZ140131 Maxwell Maja
MUZ140131 Maxwell Maja
10,327 Points

add $ here.

.#{$color} { background: $color; } } }