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

Todd Squitieri
Todd Squitieri
8,001 Points
Posted by 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
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
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

Wameedh Mohammed Ali
Wameedh Mohammed Ali
16,572 Points
Wameedh Mohammed Ali
Wameedh Mohammed Ali
16,572 Points

Here is the correct answer:

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

Thanks :)

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 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
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,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Glad you got it sorted Todd.

Ken Johnson
PLUS
Ken Johnson
Courses Plus Student 7,545 Points
Ken Johnson
Ken Johnson
Courses Plus Student 7,545 Points

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

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

Ken Johnson
PLUS
Ken Johnson
Courses Plus Student 7,545 Points
Ken Johnson
Ken Johnson
Courses Plus Student 7,545 Points

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

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