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 Greg Galus
Greg Galus
13,228 Points

Sass Code Challenge- Power of Mixins

I am stuck on this code challenge. It is not passing me and from what I can see my code is correct. Am I missing something? Task: Use the mixin on a class called ".menu_button". Set the background color to be #369 and the size to be 50px.

My Code:

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

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

8 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

".menu_button" and ".menu-button" are not the same :)

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Martin, you have a colon after .menu_button which may be breaking things.

Martin Ruston
Martin Ruston
30,736 Points
Martin Ruston
Martin Ruston
30,736 Points

I'm getting the same error message my code is below, it looks correct to me.

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

.menu_button: {
    @include button(#369, 50px);
}
MUZ140018 Sibusisosenkosi Moyo
MUZ140018 Sibusisosenkosi Moyo
8,693 Points
MUZ140018 Sibusisosenkosi Moyo
MUZ140018 Sibusisosenkosi Moyo
8,693 Points

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

MUZ140700 Emmanuel Sibanda
MUZ140700 Emmanuel Sibanda
4,957 Points

thank you. helped a lot

Greg Galus
Greg Galus
13,228 Points
Greg Galus
Greg Galus
13,228 Points

This is the error message I get: Bummer! The background color should be set to #369.

Greg Galus
Greg Galus
13,228 Points
Greg Galus
Greg Galus
13,228 Points

Ugh! Of course they're not. That was the problem. Thanks for the help Tom.

Martin Ruston
Martin Ruston
30,736 Points
Martin Ruston
Martin Ruston
30,736 Points

woops, thank you

Joshua Russo
Joshua Russo
10,037 Points
Joshua Russo
Joshua Russo
10,037 Points

I had issues with this too. When you do .menu_button { @include button } your true css output is ".menu_button button". This can't be right. So I did this:

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