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
Posted by 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?

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

What is the question asking of you?

Devin Gray
Devin Gray
39,261 Points
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.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Try inputing

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

Devin Gray
Devin Gray
39,261 Points
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?**

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Post the direct link the question please

3 Answers

Victor Arellano
Victor Arellano
12,045 Points
Victor Arellano
Victor Arellano
12,045 Points

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

Devin Gray
Devin Gray
39,261 Points
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!

Victor Arellano
Victor Arellano
12,045 Points

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
Scott Sundsvold
.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
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); }