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 Zoran Slamkov
Zoran Slamkov
8,115 Points

Sass Code Challenge

/* Write your SCSS code below. */ @mixin square($size, $color) { height: $size; width: $size; border: 1px solid $color:black border; }

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

Question:Define a box class. Use the square mixin to give it a height and width of 10px, and set the border to red. Error:The <div> with the class .box should have a red border.

What am I doing wrong?

4 Answers

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

Can't believe this one didn't get answer properly. This is the solution to your problem:

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

Gareth Redfern got it right but I think he added the code for the next task.

Gareth Redfern
Gareth Redfern
36,217 Points
Gareth Redfern
Gareth Redfern
36,217 Points

Hi Zoran, it looks you are setting the border colour slightly wrong in your mixin you set the default colour as a argument and then use that argument as a variable something like this:

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

.box { @include square(10px, red) };
Shanequa Bond
Shanequa Bond
18,447 Points
Shanequa Bond
Shanequa Bond
18,447 Points

can someone help me with Challenge Task 2 of 6

Make the color argument optional by setting it to black by default.?

Matias Valenzuela
Matias Valenzuela
7,554 Points
Matias Valenzuela
Matias Valenzuela
7,554 Points

The error is on the challenge before, 

border: 1px solid $color:black border; }

The border should be 

border: 1px solid $color;

For the .box your code is correct, I used the code below and passed the challenge:

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