I am using red as a parameter but bummer did I include red in mixin call?

Question

I can't figure out where my error is. Thanks in advance.

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


@mixin rainbow ($colors...) {
  @each $color in $colors {
    .#{$color} {
        background-color: $color;
    }
  }
}  
.box {
  @include square($color: red, $size: 10px);
 }


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

Answer 1 · 2017-04-07T22:44:38Z

April 7, 2017 10:44pm

When your .scss is refactored into .css the divs (red, orange, yellow, and green) do not have any dimensions so they will not show in the browser or preview. This can be solved by adding @include square; in your rainbow mixin. Quick side note if you don't want to include this you can still pass the challenge without it. Next if you remove the div selector around @include the boxes will display properly. So your scss should look like this

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


@mixin rainbow ($colors...) {
  @each $color in $colors {
    .#{$color} {
        background-color: $color;
        @include square(10px, $color);
    }
  }
} 

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

 }

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

Welcome to the Treehouse Community

Looking to learn something new?

Laura Cecil

Laura Cecil

I am using red as a parameter but bummer did I include red in mixin call?

1 Answer

laurahaywood

laurahaywood