Hello, my name is Allison and I’m a Sass-a-holic.

If you’ve dipped into Sass, you know how to harness the power of variables. You can use variables inside both operations and functions. Math operations are supported for numbers and as previously discussed, there are core functions that you can use for colours.

And we know how great mixins are. They take your variables and send them to Mars on a rocket ship 🚀. You can define a style of an element and then re-use it throughout your project. They are defined using the @mixin directive which then takes a block of style properties and applies it to your selector of choice using the @include directive.

You might know all this already. But here’s the thing: have you ever written your own?

Let’s do this.
Let’s go next level.

The example we’ll be working with creates a stylistic border added after a title via an :after pseudo-element.

.heading {
 
    &:after {
        border-bottom: 10px solid #6d9eeb;
        content: '';
        display: block;
        margin: 0 auto;
        padding-bottom: 15px;
        width: 100%;
    }
}

You could potentially find yourself writing varying versions of the above across your site. { Ug, that’s the pits. } Instead, let’s create the following:

.heading {
    @include title-border(#6d9eeb, 10px, 100%);
}

Now, that’s a big leap. Let’s take a closer look on how I got from Point A to B.

1. Choose which variables will be your arguments.

Figure out which arguments you’re going to be passing into your mixin as variables in the format $variable. In our case, the elements that will shift based on each use will be:

• the colour: $color
• the width of the border: $width
• thickness (or height) of the border: $height

2. Create the foundation of your mixin.

Transferring those into the SCSS skeleton you might already have as a base. You’ll start off with @mixin followed by the name of your mixin.

@mixin title-border() {
	&:after {
        border-bottom: 10px solid #6d9eeb;
        content: "";
        display: block;
        margin: 0 auto;
        padding-bottom: 15px;
        width: 100%;
    }
}

3. Insert arguments into your mixin skeleton.

Remember Step One’s arguments? Insert those (as variables) into your set of parenthesis. Replace the appropriate CSS properties with its associated value. For example, in this case – the 10px within the border-bottom property would be replaced with $height.

@mixin title-border($color, $height, $width) {
	&:after {
        border-bottom: $height solid $color;
        content: "";
        display: block;
        margin: 0 auto;
        padding-bottom: 15px;
        width: $width;
    }
}

4. Add default settings to your arguments.

Now, what if most of the time, the colour, height, and width will usually be the same because you want to maintain cohesive branding & atomic design?

You can set defaults within the arguments in the parenthesis on the first line of your mixin! By doing that, you’re making the set optional. If you pass in new values, it will adjust accordingly but otherwise the defaults will be in use.

@mixin title-border($color:#27ae60, $height:4px, $width:50%) {
	&:after {
        border-bottom: $height solid $color;
        content: "";
        display: block;
        margin: 0 auto;
        padding-bottom: 15px;
        width: $width;
    }
}

By default for the code above, our mixin will have a decorative title border that is a 4px tall green that takes up 50% of the title itself. Also, did you know when you use a mixin without passing any arguments you don’t need to use ()?

.heading {
    @include title-border;
}

What if we only want to change ONE of our arguments and use the other defaults we’ve set?

.heading {
    @include title-border($color:#c20e9b);
}

As you can see above, you just make sure to use the appropriate variable’s name and the new value without mentioning the other variables.

And there you have it; you now have the magick within you to recreate your favourite code patterns and keep your code DRY in a new (& fun) way. If you have any questions or clarifications, please feel free to reach out.

See the Pen Title Border Mixin (without alignment) by Allison Tarr (@allisonplus) on CodePen.0

Additional Resources:

• Sass docs: Mixins