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 Sass Basics Add Reusable Logic to Your Sass Advanced Mixins Challenge

It keeps saying my box is supposed to have a red border and asking if I included the square mixin correctly.

Can someone please show me what I am doing wrong this this one. I rewatched the videos and I cant figure this one out.

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

.box{
@include square($size, $color){
height: 50px;
width: 50px;
border: $color;
    }
  }
}

1 Answer

Zak Erving
Zak Erving
22,830 Points
/* This is your mixin definition. The arguments between the parentheses are variables that can be passed */
/* to different properties in the body of the mixin. The arguments can be anything, but they need to be */
/* applied to the appropriate property (i.e., "width" could not have a value "green") */

@mixin square ($size, $color: black) {
  height: $size; /* this will take on the $size argument when applied to an element */
  width: $size; /* same as above */
  border: 1px solid $color; /* this will take the $color argument. If $color is not defined, it uses black as default */
}


/* This is your element where you want to use your new mixin. Since the mixin is already defined, */
/* all you have to do is decide what arguments/variables you want pass to it. */
/* If you wanted a 50px box with a purple border, your arguments would be: (50px, purple) */

.box {
  @include square(50px, purple); /* this is for a 50px box with a purple border */
}


.other-box {
  @include square(100px); /* this is for a 100px box with a black border. Black is the color since it wasn't passed as an argument */
}