CSS Sass Basics Add Reusable Logic to Your Sass Advanced Mixins Challenge

Ja'Quan Thompson
Ja'Quan Thompson
Front End Web Development Techdegree Student 9,236 Points

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.

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

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

1 Answer

Zak Erving
Zak Erving
21,640 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 */