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.
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.
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!
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.
It’s the shorten version of full @media query technique.
If you want to play with mixins and functions in Sass there is fab playground called Sassmeister.
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.