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

anguswhiston
anguswhiston
17,225 Points

Task 3/6 Advanced Sass concepts

The challenge is "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 is:

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

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

I am seriously struggling to spot anything wrong with this. Usually it's something so glaringly stupid, but I think I've checked that.

Tagging my new favourite teacher Hampton Catlin for help!

1 Answer

anguswhiston
anguswhiston
17,225 Points

Right if anyone else is struggling with this I've solved it. I won't give the answer exactly, but in code above I was separating the box class entirely from the mixin.

In reality you want to include the .box class within the mixin and then declare a change to it when you run your @include line.

There should be no { } style braces after you've written your mixin.

Hopefully that helps anyone else struggling with this.