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

Question

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;
    }
  }
}

Answer 1 · 2020-09-01T08:26:56Z

September 1, 2020 8:26am

/* 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 */
}

Welcome to the Treehouse Community

Looking to learn something new?

Ja'Quan Thompson

Ja'Quan Thompson

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

1 Answer

Zak Erving

Zak Erving