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 Leon Kenedy
Leon Kenedy
Courses Plus Student 9,149 Points

Can someone please help with this code challenge?

I am stuck on number four, I am not sure what to do. I know I am supposed to switch the arguments but have no clue what they mean. 

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

$color: black;

.box {
    @include square(10px, red);
}
Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi, which course, which code challenge is it?

Leon Kenedy
Leon Kenedy
Courses Plus Student 9,149 Points

http://teamtreehouse.com/library/advanced-mixin-arguments Sorry I forgot.

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

It's Sass - I don't know almost anything about it. Sorry.

Leon Kenedy
Leon Kenedy
Courses Plus Student 9,149 Points

Its okay, thanks anyways.

2 Answers

Damian Saunders
Damian Saunders
23,000 Points
Damian Saunders
Damian Saunders
23,000 Points

Hi Leon, In number 4 it's asking you to switch the two arguments in the box class.

What's implied here is "what do you need to do if you switch the two arguments so it actually works.

So you're starting with;

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

If you simply switch the arguments you will have;

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

But that will result in the side being red, and the color being 10px - obviously that won't work.

Remember we can actually set the value of the arguments like $color: red, $size: 10px ?

Therefore we can do the following;

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

Hope that explains it.

Cheers Damian

Leon Kenedy
Leon Kenedy
Courses Plus Student 9,149 Points

Oh, at first I was switching the variables. How would I get number five?

Damian Saunders
Damian Saunders
23,000 Points
Damian Saunders
Damian Saunders
23,000 Points

Hi Leon, Sorry for the late reply, I'm in Australia.

I'm not sure it's cool to simply give you the answer, as that's not really helping you learn.

I'd review the video called Advanced Mixin Arguments - I just did and the answer to 5, and 6 in in that video.

The key to the argument taking any number of colors is the ... like ($colors...)

You assign the color to the class like .#{$color}

Watch the video over and over and you'll get it.

Cheers Damian