Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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!

Scott Sundsvold
seal-mask
.a{fill-rule:evenodd;}techdegree
Scott Sundsvold
Web Development Techdegree Student 4,479 Points

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); }