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

I am having trouble setting a size using mixin.

In the challenge, it says: "Use the mixin on a class called .menu_button. Set the background color to be #369 and the size to be 50px." So far, my code has passed muster, until I get to this command line.

Here's the scss coding that works up to this point:

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

When I go for the .menu_button class, the code I think should work is:

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

However, with the .menu_button code lines, I get the message, "Bummer. your size should be set at 50px." or words to that effect.

I note that it didn't say my background color command line was wrong, just the size line. That's why i'm confused. Any help would be appreciated. thanks

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

sorry for the mess ... i thought i had separated the text of my question from the code properly but apparently i still have some things to learn. Please disregard the html coding, i don't even know how it got in, 'cause I didn't put it there. It's a mystery.

Anyway, the second box of code, the style.scss code, is the code i am having trouble with. Under the .menu_button, i keep getting told to set the color to #369 and the size to 50px. The error message says nothing about the background color not being set correctly, just that the size is supposed to be set at 50px. So I'm confused as to what i'm doing wrong.

maybe a mod can fix the appearance here, i'd sure appreciate it.

Hi Steven,

Sure, I will remove HTML coding as you suggest me to do so.

1 Answer

Hi Steven,

There is nothing wrong on your part which is common for CSS but we have to follow SCSS different rules.

When we look at first part, see below, then we have to include it in second part (background colors and size) for button.

@mixin button ($color, $size)
.
.
.
.menu_button {
     @include button(#369, 50px);
  }

thanks, now i understand better where i went "wrong". Also, thanks for cleaning up my question.