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 (retired) Variables, Mixins, and Extending Selectors The Power of Mixins

Todd Squitieri
Todd Squitieri
8,001 Points

Adding Mixins - Stumped on Challenge

I am stumped on this particular challenge:

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

This is my code:

/* Write your SCSS code below. */
@mixin button($color, $size){
  background: $color;
  width: $size;
  height: $size/2;

}

 .menu_button {
 @include button(50px);
 background-color: #369;
  }

I'm also not entirely sure what the purpose of doing this is, but if anyone can shed light, I would appreciate it.

Thanks in advance,

Todd

6 Answers

Todd Squitieri
Todd Squitieri
8,001 Points

Hi Wayne,

Thanks for the tip, but it doesn't seem to be working! Here's my code, given what you've suggested:

/* Write your SCSS code below. */
@mixin button ($color, $size){
  background: $color;
  width: $size;
  height: $size/2;

  .menu_button {
  @include button (#369, 50px);
  }
}

Did I misunderstand? Let me know.

Sincerely,

Todd

Todd Squitieri
Todd Squitieri
8,001 Points

I also tried changing the background to background-color:

@mixin button ($color, $size){
  background-color: $color;
  width: $size;
  height: $size/2;

  .menu_button {
  @include button (#369, 50px);
  }
}

But it's still not working!

-T

Here is the correct answer:

.menu_button { @include button(#369, 50px) }

Thanks :)

Wayne Priestley
Wayne Priestley
19,567 Points

Hi Todd,

Your using background-color and your mixin is using background, try changing you code to match the mixin and see if that works.

Todd Squitieri
Todd Squitieri
8,001 Points

Okay, nevermind. I figured it out. After much trial and error, I added the following line separately from the first part of the challenge:

.main_button {  @include button (#369, 50px); } 

And this seemed to solve my problem.

-T

Wayne Priestley
Wayne Priestley
19,567 Points

Glad you got it sorted Todd.

@mixin button ($color, $size){ background-color:$color; width: $size; height: $size/2; }

.menu_button { @include button (#369, 50px); }

@mixin button ($color, $size){ background:$color; width: $size; height: $size/2; }

.menu_button { @include button (#369, 50px); }