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
Edward Hong
15,431 PointsError when including mixin
I get the message "Bummer! The <div> with the class .red should have a red background. Did you use red as a parameter when including the rainbow mixin?"
Here is my code:
@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: $colors;
}
}
}
@include rainbow(red, orange, yellow, 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: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: $colors;
}
}
}
@include rainbow(red, orange, yellow, green);
2 Answers
Edward Hong
15,431 PointsFigured it out, should have had background-color: $color; instead of background-color: $colors;
Emma Davis
4,760 PointsGlad you sorted it - I will remember to read the challenge before I answer next time :)
Emma Davis
4,760 PointsThere are 2 problems with your css. The first is that you are using the variable names when including the mixin which you don't [need to] do and secondly, you have the properties around the wrong way. What you should have is
.box {
@include square(10px, red);
}
Edward Hong
15,431 PointsOh yea that was part of the code challenge, it was to show us that it's possible to have them around the other way if we specified the variable name first and the code will still run correctly.
Caleb Kleveter
Treehouse Moderator 37,862 PointsCaleb Kleveter
Treehouse Moderator 37,862 PointsHey Edward, I thought I might let you know I reformatted your code with markdown to make it more readable. Happy coding!