SCSS Simple mixin

mixin.scss

%title-style {
	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		width: px(58);
		height: px(4);
	}
	position: relative;
	padding-bottom: 1rem;
}

@mixin title-border($color) {
	@extend %title-style;
	&:after {
		background: $color;
	}
}

Simple example of a mixin,
I have a project with mulitiple title colours, some require a matching border and some don't.

So to add the border to the required title add:

.introduction h1 {
    @include title-border($text_blue);
}

I've seperated the static part of the mixin into an extend property. As this will only be included once in the stylesheet, it'll help with the weight of the css.