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 Add Reusable Logic to Your Sass Advanced Mixins Challenge

Kyle Cameron
Kyle Cameron
20,683 Points
Posted by Kyle Cameron
Kyle Cameron
20,683 Points

Issue with code challenge

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

This challenge keeps asking me to set the value of $color to 1px solid. I cant figure out why this isn't correct?

style.scss 
@mixin square($size, $color:1px solid) {
  height: $size;
  width: $size;
  border: $color;
}
Alex Moser
Alex Moser
6,301 Points

Hi Kyle,

I believe the wording in the quiz is a bit confusing but you are on the right track!

When creating a mixin, the variables usually are only meant for a single property. In your code, $color: 1px solid is telling Sass to compile anywhere the $color variable is listed as 1px solid -- unless you give it a different color when using the mixin in the wild. 1px solid is not a color is it? :)

The correct way to define the square mixin is as follows: 

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

Using this mixin, you'd get a 20px pink box because you already set a default color in the original mixin declaration:

.box {
  @include square(20px);
}

Now, if you then wanted to change the color of this box:

.different-box {
  @include square(20px, black);
}

which would give you a 20px black box.

1 Answer

Ray Karyshyn
Ray Karyshyn
13,443 Points
Ray Karyshyn
Ray Karyshyn
13,443 Points

The challenge is not asking you to set $color equal to "1px solid."

Instead, it is asking you to set the color of a border that has a width 1px and is solid.

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