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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![MUZ140018 Sibusisosenkosi Moyo](https://uploads.teamtreehouse.com/production/profile-photos/2151012/micro_Photo0961.jpg)
MUZ140018 Sibusisosenkosi Moyo
8,693 Pointsam tired of being called a bummer guys please help
Challenge Task 6 of 6
Use the mixin we just wrote to create a series of classes for the colors: red, orange, yellow, and green.
<!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>
/* Write your SCSS code below. */
@mixin square($size, $color)
{
height: $size;
width: $size;
border: 1px solid $color;
$color: black;
}
.box{
@include square(10px, red);
}
.box {
@include square($color:red,$size:10px);
}
@mixin rainbow ($colors:red) {
@each $color in $colors {
.#{$color} {
background: $color;
}
&.#{$color} {
background: $colors;
}
}
}
1 Answer
![Kevin Korte](https://uploads.teamtreehouse.com/production/profile-photos/86647/micro_me.jpg)
Kevin Korte
28,148 PointsOkay, a couple of things here to correct.
The quiz doesn't ask you to pass in a default argument for your mixin. You're currently passing in a default value of red. What it did ask you to do was to pass in a colors argument that accepts any number of options. To find out how to do that, you might have to go to the Sass documentations and look for a variable arguments parameter for a mixin. This link might help you (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments)
After you've fixed that, we can look at the logic of the loop in the mixin. You're kinda doubling up on your loop, which won't give you the correct results. It'll actually error because we do not have a $colors variable in the scope of the loop, only a $color variable. On top of that, the ampersand would have created a selector like
.red.red
which also wouldn't be correct. You can actually remove the entire bottom section. You're mixin should simple be
@each $color in $colors {
.#{$color} {
background: $color;
}
}
- For the final step, you are suppose to use the mixin. You haven't written the code to do that yet. If you go back the Sass documentation, you can see in the example, you call a mixin with the
include
function. So that code to complete task 6 simply becomes@include rainbow(red, orange, yellow, green);
Ben Brenton
266 PointsBen Brenton
266 PointsNot really an answer to this question, but the 'Bummer!' touch can get annoying after a while if it doesn't tell you specifically what has gone wrong.