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

Posted by williamrossi
williamrossi
6,232 Points

Mixin mayhem

hey guys having trouble with mixins again

"Use the mixin on a class called .menu_button. Set the background color to be #369 and the size to be 50px."

This is what I got.. I'm confused where I am supposed to set the background color and size? set the variable $size to 50px?

@mixin button ($color, $size) { $color:#369; $size:50px; height:$size / 2; background:#369; height:50px; width:50px;

}

.menu_button { @include button; }

2 Answers

Dan Gamble
Dan Gamble
4,122 Points

You need to define the color & size when you include the button not necessarily in the mixin.

@mixin button ($color, $size) {
  background: $color;
  height: $size / 2;
  width: $size;
}
.menu_button {
  @include button(#369, 50px);
}
williamrossi
williamrossi
6,232 Points
williamrossi
williamrossi
6,232 Points

Ahhhhh so simple haha, thanks!

Dan Gamble
Dan Gamble
4,122 Points

No worries, happy to help :)