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

Devin Gray
Devin Gray
39,261 Points

advanced-mixin-arguments challenge task 3 of 6

Question: "Define a "box" class. Use the "square" mixin to give it a height and width of 10px, and set the border to red."

I'm having trouble with this one too, and I have almost identical code. I feel like I've tried everything but I keep coming back to this.

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

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

I don't know any other way, is there any help?

What is the question asking of you?

Devin Gray
Devin Gray
39,261 Points

Define a "box" class. Use the "square" mixin to give it a height and width of 10px, and set the border to red.

Try inputing

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

Devin Gray
Devin Gray
39,261 Points

I still get the same error ** The <div> with the class .box should have a red border. Did you include the square mixin correctly?**

Post the direct link the question please

3 Answers

You typed a : instead of ; on width: $size;

Devin Gray
Devin Gray
39,261 Points

bangs head on desk It's always the simplest thing! I've been on this computer too long. Good thing this is my last code challenge for the night. Thanks!

I know, it's the most common mistake people make when writing code.

You're welcome, good luck!

I'm still struggling with this challenge.

"@mixin square($size,$color:black;) { height:$size; width:$size; border:1px solid $color; } .box { @include square($size:10px,$color:red); height:$size; width:$size; border: 1px solid $color; }"

J-Me Metcalfe
J-Me Metcalfe
5,697 Points

I just completed this task with:

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

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