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 Marty Folwick
Marty Folwick
4,996 Points

stuck on a sass code challenge for mixins

I have reversed everything possible but can't seem to get the coding correct.

Chyno Deluxe
Chyno Deluxe
16,936 Points

Can you provide the code you've written.

Marty Folwick
Marty Folwick
4,996 Points

Here it is and the challenge is to switch the order of the arguments. "be sure to specify the variable for each argument or you'll end up with a height and width of red and a 1px solid 10px border. (Needles to say that would be invalid)"

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

.box { @include square (10px, red) }

1 Answer

John Coolidge
John Coolidge
12,614 Points
John Coolidge
John Coolidge
12,614 Points

Hello Marty,

In the exercise you need to switch the order of the arguments. But when you do, you need to add to the arguments which variable they belong to.

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

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

In the class box, above, you have to specify the color by using the dollar sign, color, and a colon, followed by the color you want. Likewise with the size, you need to use the dollar sign, size and colon, followed by the size. If you switch them without defining which variable they belong to, you will get an error.

Hope that helps,

John