Mixins You Need in Your SCSS Library

Sue Anna Joe
Sep 11, 2018 · 2 min read

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.

Zoosk Engineering

Anything and everything the Zoosk engineering team is up to.

Sue Anna Joe

Written by

Zoosk Engineering

Anything and everything the Zoosk engineering team is up to.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade