My 4 favourite useful Sass mixins

If you’ve ever caught yourself in the situation of being frustrated over repeating same parts of code bit by bit without bigger sense, it’s probably sign you should try and use frequently Sass mixins.

Sass mixins are great and really helpful in process of implementation of your brand new website.


What are the Sass mixins?


At the official website of Sass, we can read that: “A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.”

This is extremally helpful in times of CSS3 and various vendor prefixes (yes, you can use autoprefixer for this, but still…). There are obviously loads of libraries with bunch of premade mixins which helps you to boost up your implementation experience.

Example of Sass mixin and how to use them


The most useful mixins are the ones you need, but I have few of those I need almost in every project.


Retina background with Perceived Performance fallback

Whoop.com

I’ve come up with this mixin after read of the article written by CSS Wizardry about improving perceived performance of background by adding additional gradient before the image is loaded. It works great with slower internet connection, when user waits for bigger images to load.

You can see how it works on masthead images at one of the websites I’m currently developing www.whoop.com.

You can use this awesome website to create the linear gradient for your image in a few seconds!

Placeholder attributes

This one is inspired by CSS-Tricks and their solution for covering cross-browser placeholder support (read more). What it does is it basically creates styles for placeholder which works with most of modern browsers. It’s pretty straightforward.

Breakpoints mixin

It’s the shorten version of full @media query technique.

Clearfix mixin

If you want to play with mixins and functions in Sass there is fab playground called Sassmeister.


I’m open for freelance work on your project! If you like the case study let me know! Let’s make something awesome together.


If you would like to work with me on your next or current project, let’s talk about that. I’m open for new projects at the beggining of 2017.

hello@iamarek.com