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

Posted by Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Sass Final Challenge

I'm stuck on the last challenge for the Sass course, and I have no clue as to what I'm doing wrong. I feel like a total ignoramus because I've gone and looked at the previous video and I still can't find the answer.

Here's the task (number 4 out of 6):

Switch the order of the arguments. Be sure to specify the variable for each argument, or you'll wind up with a height and width of 'red' and a '1px solid 10px' border! (Needless to say, that would be invalid.)

Here's my code:

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

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

And the error:

Bummer! Try to reverse the order of the arguments when you include the mixin. You'll need to specify the variable for each argument.

My code worked for the third task:

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

My code for the third task:

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

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

I feel like the answer is staring me right in the face but I still can't see it. Can anyone give me a nudge in the right direction? I'd greatly appreciate it.

Thanks in advance!

EDIT: I'm trying to format my code correctly, but it's not recognizing my backticks...

EDIT 2: There we go. Whitespace issues.

Paul Graham
Paul Graham
1,396 Points

That's because from what I can tell you're using apostrophe/tick rather than backtick. Backtick is with tilde on the left corner of the keyboard.

8 Answers

Chris Scott
Chris Scott
7,673 Points

Shouldn't the order be,

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

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

Edit: Above Passed.

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

When you call/include a mixin, you can pass it arguments in any order you want, as long as you include the appropriate argument name before the value. The challenge is testing my ability to do just that.

Watch the advanced mixin arguments video (skip to 7m:20s).

Chris Scott
Chris Scott
7,673 Points

I goofed see edit.

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Weird...that code passed once I added curly braces and semicolons, but I can't see any syntactical difference between my code and yours.

After I took the WordPress theme course, I started the habit of placing a single space on the inside of my parentheses after Zac--it really helped me keep my code straight. And ever since I can remember, I've never put a space after the colon in CSS declarations. Must've just been those personal styles that tripped it.

Thanks!

Chris Scott
Chris Scott
7,673 Points

It was mainly the order of the variables for the include, I passed $color first then $size.

tobart
tobart
13,518 Points

Hi Chirs, yes, was first wondering why i didn’t passed on my side, then realized that i didn’t assign black as default color to the variable. after doing so, i passed.

tobart
tobart
13,518 Points

Think also it’s right. Forgot on my side to add the default black on the variable. After doing so, i passed also. Thank’s!

James Lines
James Lines
10,420 Points
James Lines
James Lines
10,420 Points 
            <p>
 @mixin square($size, $color: black) {
    height: $size; 
  width: $size; 
  border: 1px solid $color;
 }

 .box {
 @include square($color: red, $size: 10px);
 }
</p>
            ``` 

This should be the correct code
Matias Valenzuela
Matias Valenzuela
7,554 Points
Matias Valenzuela
Matias Valenzuela
7,554 Points

Your code is correct but to pass the challenge you have to make a small change 

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

Add a space between $color and red and $size and 10px

Alex Bukreev
Alex Bukreev
8,362 Points
Alex Bukreev
Alex Bukreev
8,362 Points

This works for sure))!

@mixin square ($size, $color: black) 

                            {height: $size; 
                            width: $size;
                            border: 1px solid $color}

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

oops, the code above is of course relates to 3rd task , 4th is

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

        .box {@include square($color: red, $size: 10px)}
Sanjeev Veloo
Sanjeev Veloo
4,713 Points
Sanjeev Veloo
Sanjeev Veloo
4,713 Points

I got it to work, by changing the first bits like this 

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

So it doesn't create the .square class. Then when you call the box, it's just the box divs.

Dipika Purohit
PLUS
Dipika Purohit
Courses Plus Student 20,955 Points
Dipika Purohit
Dipika Purohit
Courses Plus Student 20,955 Points

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

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

Paul Graham
Paul Graham
1,396 Points
Paul Graham
Paul Graham
1,396 Points

n/m

Raymundo Figueroa
seal-mask
.a{fill-rule:evenodd;}techdegree
Raymundo Figueroa
Front End Web Development Techdegree Student 25,606 Points
Raymundo Figueroa
.a{fill-rule:evenodd;}techdegree
Raymundo Figueroa
Front End Web Development Techdegree Student 25,606 Points

You have to delete the code written in stage 3 and add .box @include square{$color:red; $size:10px;}