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

Alex Hickey
Alex Hickey
6,570 Points
Posted by Alex Hickey
Alex Hickey
6,570 Points

Default values?

Is there any to specify default values for mixin parameters, so if we have a common scheme with only occasional exceptions, we don't need to type in the parameters each time?

2 Answers

Rand Seay
Rand Seay
13,975 Points

In Sass, you can specify default values in a mixin the following way:

@mixin awesome-button($bg-color, $radius: 10px) {
    background: $bg-color;
    border-radius: $radius;
    color: #fff;
    font-family: sans-serif;
    padding: 10px;
    text-decoration: none;
        &:hover {
            background: lighten($bg-color, 20%);
        }
}

When using the above mixin, you need not pass in a value for $radius if you don't want to. It will default to the 10px.

a.home {
  @include awesome-button(#369);
}

a.about {
  @include awesome-button(#A69, 20px);
}

Hope this helps!

Alex Hickey
Alex Hickey
6,570 Points
Alex Hickey
Alex Hickey
6,570 Points

That's exactly what I was looking for. Thanks Rand!

Alex Hickey
Alex Hickey
6,570 Points
Alex Hickey
Alex Hickey
6,570 Points

double post sry please delete!