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

Posted by nicolabell
nicolabell
18,212 Points

Bummer! The mixin should take 2 parameters, '$size' and '$color'. - but it does!

I keep getting this error message but I can't spot the problem - halp!

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

}

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

3 Answers

calp
calp
10,317 Points
calp
calp
10,317 Points

I'm not sure what task you're on about, the code above works but to finish all of the tasks you will need this code as there's additional things you need to do.

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

for the last task you need to change the box class to

.box {
  @include square($color: red, $size: 50px);
}
nicolabell
nicolabell
18,212 Points

Ahhhh thank you I was swapping it round in the mixin it's self! Thank you :)

calp
calp
10,317 Points
calp
calp
10,317 Points

You've done everything right but you haven't added the parameters in the order it has asked for. Try having the size before the color like this,

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

}
nicolabell
nicolabell
18,212 Points

I had a go but that does not seem to work either :S

calp
calp
10,317 Points
calp
calp
10,317 Points

I'm not sure what you're doing but I've completed the challenge successfully with the code both times

Task 1

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

Task 2

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

Task 3

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

Task 4

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