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

Wenwei Lu
Wenwei Lu
10,897 Points
Posted by Wenwei Lu
Wenwei Lu
10,897 Points

Sass basic

Write a new definition for the "button" mixin, which takes two arguments: $color and $size. The background should be set using the value in the $color variable, and the width should be set using the $size variable. The height should be half of the value in the $size variable.

index.html 
<!DOCTYPE html>
<html>
<head>
  <title>Sass Basics - Code Challenge</title>
  <link rel="stylesheet" type="text/css" href="page-style.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Hampton's Blog</h1>
  <a class="menu_button" href="#">
    Menu
  </a>
  <div class="entry">
    <h1>Great Music</h1>
      <div class="content">
        <p>
            Here are some of my favorite bands from years past and present: Belle and Sebastian, Pixies, and Daft Punk. Listening to music allows me to focus when I'm programming. 
            <a href="#">Read More</a>
        </p>
    </div>
  </div>
</body>
</html>
style.scss 
/* Write your SCSS code below. */
@mixin button($color, $size){
  background: $color;
  width: $size;
  hight: o.5 * $size;
}

4 Answers

Jayden Spring
Jayden Spring
8,625 Points
Jayden Spring
Jayden Spring
8,625 Points 
/* Write your SCSS code below. */
@mixin button($color, $size){
  background: $color;
  width: $size;
/* hight: o.5 * $size;
    For HEIGHT to be HALF the size you can use a divisional operator */
  height: $size/2;
}

Hope this helps, Jayden

Wenwei Lu
Wenwei Lu
10,897 Points
Wenwei Lu
Wenwei Lu
10,897 Points

Hi Jayden, Don't know why '0.5*' doesn't work, thanks anyway

Wenwei Lu
Wenwei Lu
10,897 Points
Wenwei Lu
Wenwei Lu
10,897 Points

Hi Jayden, Don't know why '0.5*' doesn't work, thanks anyway

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

The correct answer is:

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

Thank you

Joseph Damiani
Joseph Damiani
1,066 Points
Joseph Damiani
Joseph Damiani
1,066 Points

Don't use 0.5 for the term half. Use this instead:

height: $size / 2;

Brigitt Arndt
Brigitt Arndt
9,498 Points
Brigitt Arndt
Brigitt Arndt
9,498 Points

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