Mixins You Need in Your SCSS Library

As a CSS author I’ve typed many property-value pairs over and over again in different declaration blocks, and it gets really tedious. Our CSS developers here will tell you the same thing. Luckily we use Sass (and more specifically the SCSS syntax) so we’re able to group repeated properties together and call them in any block we want. These groups are called mixins.

One simple example is setting an element’s width and centering it on the page:

header {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
}

This is something we do a lot, so to make this implementation a bit quicker, we can put those properties into a mixin:

@mixin limited-container($width) {
    margin-left: auto;
    margin-right: auto;
    width: $width;
}

Then we call the mixin in the original block, passing in a custom width value based on our needs:

header {
    @include limited-container(500px);
}

This will compile into the first example block shown above.

Over the years we’ve added many mixins to our in-house library. They’ve really sped up our work, and some of them are common and simple enough that we’ve put them together in a gist to share. Thanks to both Roger Flanagan and Amir Sattari for their contributions to this library and a special shoutout to Roger who is a Zoosk team lead and UI veteran responsible for many of the handy mixins we use every day.