This post is for those of your that work with the sassiest CSS of all, SCSS!
Today we’ve compiled 5 great SCSS mixins for you. From centring elements, generating animations or applying long, sexy shadows; we’re sure you can use some of these great SCSS mixins in your upcoming projects.
So let’s get started!
Long Shadow Gradient Mixin by roikles
This SCSS mixin allows you to add long, great looking shadows to your headings and text elements. It looks great.
Animate.scss by jakob-e
This brilliant mixin allows you to easily include the animations from Daniel Eden’s fantastic Animate.css using SCSS.
centerEL by Maxwell Morgan
Now, this is a useful one! We’re all aware of how tricky it can be to centre a block of text both horizontally AND vertically. This SCSS mixin takes care of that completely making things really simple for you.
SCSS triangles mixin by Eduardo Bouças
The use of triangles in web design can really lift a design. It can help emphasise certain elements on the page, influence a users journey through a page or simply help tell a visual story. However, if you’ve ever tried to code these from scratch yourself you’ll know that they can be quite tricky to perfect.
This SCSS mixin from Eduardo Bouças allows great flexibility in adding arrows to your website. Even working with media queries!
SASS Glitch mixin by ayamflow
This last one is a fun one.
This creative SCSS mixin allows us to create a glitch style hover effect for text by offsetting the text on the x axis whilst selecting the colour of the text randomly from an array. Very cool. Check it out below.
Don’t forget to follow us on Twitter for more guides and join the rest of our community using the form below: