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 MUZ140018 Sibusisosenkosi Moyo
MUZ140018 Sibusisosenkosi Moyo
8,693 Points

am 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.

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)
{
    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;
}
  }
}
Ben Brenton
Ben Brenton
266 Points
Ben Brenton
Ben Brenton
266 Points

Not 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.

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Okay, 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);