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

Petr Holusa
PLUS
Petr Holusa
Courses Plus Student 4,041 Points
Posted by Petr Holusa
Petr Holusa
Courses Plus Student 4,041 Points

better understanding of @mixin

Hi, I have done this code challenge, but from the video I have no idea what I have done. When I compile this, I've got just .menu_button. SO any ideas what's that good for? Or better example, please?

Thank you

/* Write your SCSS code below. */

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

}

.menu_button { background: #369; width: 50px;

}

2 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

It's just used as a shortcut for writing out the repetitive CSS code you would need to have multiple button styles that only have slight variations in colour or size.

Imagine you were making a 'drawing' app and you wanted to give the users options of many different colours, each with their own button to select them. You wouldn't want to have to manually make a different style for each one, so instead you could just use this quick mixin. Better yet, after doing some more advanced Sass stuff, you could use a list and a loop to quickly generate all the CSS you need in just a few lines of Sass.

Petr Holusa
Petr Holusa
Courses Plus Student 4,041 Points
Petr Holusa
Petr Holusa
Courses Plus Student 4,041 Points

Can you please give me an example of the code above and how to use it in practise? I think I'm getting there what you mean but still not sure how to use it. Thanks!

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

This article explains a good use case and example quite well:
Using Sass lists and each loops for super easy CSS branding