Custom User @mixins

Mixins are one of the most useful and compelling reasons to use a CSS preprocessor. The typical way they are presented is for helping with CSS3 vendor prefix stuff. Indeed that is a compelling use case. No more tedious writing of all the prefixes and even more tedious updating of them over time.

However, if you are using Sass, you can use Compass, and Compass already has all those CSS3 mixins ready to go for you. Want to use the new CSS filters but want to be all future proof about it? No problem:

But handcrafted @mixins can be useful too! That is, @mixins that you author yourself to benefit your specific project. I enjoyed a post by Sacha Greif where he outlaid some @mixins he uses sometimes for specific projects.

For instance, he has some for the embossing & letterpress effects found on some sites.

And then you could call that on any selector you wish to have that effect.

.module, header[role="banner"] {
@include box-emboss(0.3, 0.6);
}

If you wanted to get super clever with this, you could also make a placeholder selector in which to @extend. That way you aren't repeating any code in the compiled CSS but you can separate your selectors and organize them however you want.

I thought I'd share other custom @mixins I've used on some of my own projects.

Font Stacks

On this site I have four font stacks:

Brand

Headers

Body

Code

If you're properly careful with fonts, you probably aren't setting font-family too many different times in your stylesheet. If you're setting the same stack a dozen times, there is something wrong going on. But, you might have to more than once. For instance, you might have a default body font set literally on the <body>, but that won't cascade into form elements, so if you want to use the same font there you'll need to set that again on those elements. Now that you're setting it in two places, a @mixin is already useful.

I like using @mixins for this rather than a string variable set to the font families themselves, because the @mixin allows you to set other properties too if you wish. For instance, you might be using an @font-face font where you're only loading one particular weight and thus you want to set that weight whenever you set that font-family.

Media Query Mixin

You can create mixins that output the content that you pass after it in curly braces. This allows for a couple of neat possibilites. For instance, you can "name" a media query and then use it wherever you want. Meaning updating that media query only has to happen in one place. For instance:

Toolbox Mixins

There are some simple helper classes that I've used on countless projects over the years. Things like an accessible hiding class and typography helping classes. If you make a mixin for these things, you can get double the bang for your buck.

Now you have a class name you can use in markup if you need to apply these properties. But you also have a mixin you can use to apply these properties to other declarations if you can't or don't want to touch the markup.

Note that I generally don't advise having your mixins and classes right next to each other like this. I prefer mixins to be in a separate file like _bits.scss which compiles to nothing and thus can be included on any other Sass file.

While triangles are not built into Compass, they are built into Zurb Foundation’s Compass extension. While not a huge fan of Foundation for large sites (it gets cumbersome), I do use it frequently for small sites that are one or two pages and the triangle mixin very helpful.

I love using SASS to style website, I could never imagine going back to straight CSS! I use mixins for media queries, font stacks, and backgrounds the most. My recent one is when I need to clear any parent styling to a div, which comes up a lot when working with drupal. So what I like to use is this:

I’m using these mixins too, but I didn’t build it myself. I use a gem which extends SASS called Bourbon (for styling) and Neat (for positioning) and they have those awesome features. I really recommend using those gem’s, because they’re all prefixed so everything you want (like those examples), is inside those gems! And because they’re awesome :)

After gathering lots of CSS tricks, I’ve decided to published all this mixins (using Sass & Compass) under this project: Compass Recipes. This is still WIP, but there is lots of interesting stuffs.
Hope you enjoy it.

I’m still in transition to SASS, but these are some LESS mixins I’m currently using in a project. The best use I’ve found for mixins is the ability to set your fallbacks for IE and older browsers, as well as pass in your values for browser prefixes.

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.