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

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.