SCSS Mixins | 5 awesome and creative examples

SCSS Mixins | 5 awesome and creative examples

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

See the Pen Long Shadow Gradient Mixin by roikles (@roikles) on CodePen.

This SCSS mixin allows you to add long, great looking shadows to your headings and text elements. It looks great.

Check out the pen here.

Animate.scss by jakob-e

See the Pen Animate.scss by jakob-e (@jakob-e) on CodePen.

This brilliant mixin allows you to easily include the animations from Daniel Eden’s fantastic Animate.css using SCSS.

Check out the full pen here

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.

See the Pen centerEl by Maxwell Morgan (@maxinacube) on CodePen.

View the centerEl SCSS mixin

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!

See the Pen SCSS triangles mixin by Eduardo Bouças (@eduardoboucas) on CodePen.

Check out the full pen on CodePen

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.

See the Pen SASS Glitch mixin by ayamflow (@ayamflow) on CodePen.

View the SASS Glitch mixin on CodePen

Don’t forget to follow us on Twitter for more guides and join the rest of our community using the form below:

Leave a Reply

Your email address will not be published. Required fields are marked *