8 Handy Extends and Mixins for Sass

February 2, 2015
4 min read

Sass (Syntactically Awesome Stylesheets) is an incredibly powerful tool, but there are still a few people out there who are yet to see the benefits of extends and mixins, mainly because it makes CSS more like a programming language and less like styling language.

If we’re being really honest, CSS isn’t a programming language, or at least it never used to be. Over the years the web design community has started to see the benefit of using CSS preprocessors like Sass and LESS to make the CSS outputted on our websites more modular, maintainable and reusable.

Below I’ve grabbed a bunch of Sass extends and mixins I use on this site and others. I hope you’ll find a use for them in your next project. If you need a little primer on Sass, I wrote a detailed tutorial on everything from getting set up, organising your project files, creating variables and more.

Extends (AKA Placeholders)

Extends, usually called placeholders, are a fantastic tool. The idea is that you have one set of styles, like a clearfix (have a look below for an example) which is then applied to multiple elements, however they all get chained together in the final stylesheet so you don’t get the same styling repeated. A really good tool for creating DRY CSS.

Clearfix

A clearfix is what’s used when you float something inside something else, otherwise it breaks. Most of the extends below utilise this %clearfix extend. It’s like Sass inception.

%clearfix:after {
	display:block;
	clear:both;
	content:'';
}

Inline List

Sometimes you’ll want to remove the list styling and make the list inline, i.e. a site menu.

Be careful with the margin on the list item because in order to override it you’ll need to use some specificity like ul li {} instead of just li {}. I find it best to remove the margin right here and just add it manually to whatever element I’m using the extend on (I’ve shown it below purely for demonstration purposes).

%inline-list {
	padding-top:0px;
	@extend %clearfix;

	li {
		margin-right:30px;
		float:left;
		list-style:none;

		&:last-child {
		margin-right:0px;
		}
	}
}

Remove Text

Have elements on the page that are replaced by background image, i.e. a logo? Then this is the extend for you.

%remove-text {
	overflow:hidden;
	text-indent:-99999px;
}

Inline Form

Have a look at the email signup form at the bottom of this post, it utilises the %inline-form extend. An inline form just has all the elements inline with each other.

%inline-form {
	@extend %clearfix;

	input, .btn {
		float:left;
	}

	input {
		border-right:none;
		border-radius:3px 0px 0px 3px;
	}

	.btn {
		border-radius:0px 3px 3px 0px;
	}
}

Mixins

Mixins are a little like extends however they differ in the fact that you can give them some parameters. Have a look at the linear gradient one for a good example as it utilises two different variables for each of the gradient colour options.

Transitions

The reason we use the other variables but set them to false is so you can add additional transitions when the default all isn’t what you’re after.

@mixin transition($property_1, $property_2:false, $property_3:false, $property_4:false) {
	-webkit-transition:$property_1, $property_2, $property_3, $property_4;
	-moz-transition:$property_1, $property_2, $property_3, $property_4;
	-ms-transition:$property_1, $property_2, $property_3, $property_4;
	-o-transition:$property_1, $property_2, $property_3, $property_4;
	transition:$property_1, $property_2, $property_3, $property_4;
}

Linear Gradients

You can usually get away with using the standard linear-gradient(); now-a-days, but having this in the toolbox is always a good idea.

@mixin linear-gradient($color-1, $color-2) {
	background:-webkit-linear-gradient($color-1, $color-2);
	background: -moz-linear-gradient($color-1, $color-2);
	background: -ms-linear-gradient($color-1, $color-2);
	background: -o-linear-gradient($color-1, $color-2);
	background: linear-gradient($color-1, $color-2);
}

Box Sizing

Personally I prefer the Paul Irish method of setting the box-sizing to border-box on every element, but here’s an alternative if that’s not an option for your project.

@mixin box-sizing($box-sizing-mode) {
	-webkit-box-sizing:$box-sizing-mode;
	-moz-box-sizing:$box-sizing-mode;
	box-sizing:$box-sizing-mode;
}

Absolute Center

By using the transform:translate(); property the element will always be -50% left and -50% top of its own size. Incredibly handy for certain types of layouts.

@mixin absolute-center($top:auto, $left:auto) {
	position:absolute;
	top:$top;
	left:$left;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}

Don’t Over-Engineer Your Sass!

Far too many times over the last few years I’ve seen people over-engineering their Sass to make it more and more like a programming language. Just because you have the power of extends and mixins, that doesn’t mean you have to over-complicate things.

Like I said above, CSS isn’t a programming language, it’s a styling language and Sass gives it more power than it has by default. However, that doesn’t mean you should reinvent the wheel and take it upon yourself to create a hardcore mixin that saves you 3 or 4 lines of code, as that’s a waste of your time and not what Sass was made for. When it comes down to it, just be sensible when writing your Sass. KISS (keep it simple, stupid) has never applied more than it does to Sass.

Let me know in the comments what extends and mixins you’re using, I’d love to know (and maybe grab a few for my next project!).

Below are some other helpful articles and tutorials to help you with your next Sass-powered project:

Sass Docs – Everything you’ll need when writing it (including information on extends and mixins).
The Sass Way – Fantastic blog with tutorials covering beginner, intermediate and advanced Sass topics.
Compass – A framework of sorts that’s built on top of Sass to give you more power when coding.