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

Michael Ross
Michael Ross
11,204 Points
Posted by Michael Ross
Michael Ross
11,204 Points

Sass - Problems with calling 'rainbox' mixin & applying to divs

Hi there, I believe I have got the majority of this correct. However, my red, orange, yellow and green classes don't seem to be applied to the divs when I check my code.

I've found a solution to put the ampersand before the '.#{$color}' class that is being looped within the @each loop. I believe the ampersand solution works but I just don't understand why I would need to apply the ampersand for this to work? I believe that this technique will then create the class of red, orange, yellow and green and apply this to the parent element?

I would be really grateful if someone could explain why not just having the '.#{$color}' interpolation to create each colour class doesn't work and I'm needing to use ampersand '&.#{$color}' to output div.red? Surely '.red' on its own would work?

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

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

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

div {
  @include rainbow (red,orange,yellow,green);
}

3 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Yes that's correct. The & before the interpolation works because it creates CSS declaration like:

div.red {...}
div.orange {...}
div.yellow {...}
div.green {...}

Without the & and the div you get:

.red {...}
.orange {...}
.yellow {...}
.green {...}

Which is just as valid. So yes that latest item for yours will work.

Now if you kept the div there and didn't using interpolation you'd get:

div .red {...}
div .orange {...}
div .yellow {...}
div .green {...}

Note the spacing. You'd have children elements instead of the div. This is why it wasn't working for you before.

Michael Ross
Michael Ross
11,204 Points
Michael Ross
Michael Ross
11,204 Points

Hi Tim, apologies, the example shown above was what I was using as my first attempt at the challenge. I then found information to suggest that I had done the same as someone else and forgot to put and ampersand before the interpolation. I just wasn't sure why the above example didn't work and why putting an ampersand before the interpolation made it work.

Would the following code be acceptable based on what you were referring to with not needing to define the div?:

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

@include rainbow (red,orange,yellow,green);
Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Done... well, at least one of the answers anyway.

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Hi Michael,

This might seem a little odd, but because your rainbox mixin actually creates the classes through interpolation you don't actually need to contain the mixin execution within a div. So, all you really need to do here is remove the div that you have around your call to @include rainbow(...) and it should work as you expect.

Michael Ross
Michael Ross
11,204 Points
Michael Ross
Michael Ross
11,204 Points

Hi Tim,

Thanks for your response. So, If I remove the div I can them remove the ampersand within the each loop that creates the class?

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

You don't currently have an ampersand in your example. If you did something like this:

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

That'll work for you too.