25 Handy Sass Mixin Libraries & Snippets

Mixins are like functions which automate and output CSS programmatically and save you from writing same code again-and-again. In this post i gathered collection of handy Sass mixin libraries and snippets to help speed up and optimise frontend development workflow.


Bourbon is a library of pure Sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.



Toolkit for Responsive Web Design and Progressive Enhancement with Compass.



The purpose of Andy is to gather useful mixins and avoid enless researches or heavy framework use.



Typecsset is a small Sass library for setting type on the web. It gives you an automatic, pixel-perfect, baseline grid across all textual HTML elements based entirely on just a few settings of your choice. Baseline grids without the headaches.


Sass MediaQueries

It’s a collection of useful Media Queries mixins for Sass (including iOS devices, TVs and more). Fully customizable and very easy to use.



Saffron is a collection of Sass mixins and helpers that make adding CSS3 animations and transitions much simpler. Just include a mixin in your Sass declaration, then set any configuration using variables and mixin parameters.



Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.



Jeet allows you to express your page grid the same way human would describe it. No more needlessly nesting elements. No more rigid twelve column rules. Enjoy building faster with less code, and more flexibility with Jeet.



Sassline aims to spread better typography across the web. It can be used for prototyping, blogs or full website builds. It has recommended base typography styles and Sass mixins to work proportionally from the baseline grid using rems.


The Basic Brockmann

Brockmann is designed to be super lightweight and incredibly easy to understand. It’s not a comprehensive system. It’s a set of transparent and reusable mixins that let you built out a pre-conceived grid quickly.

brockman grid


Gridle is a set of complete and simple settings, mixins and classes that make the creation and usage of grid systems (even complex ones) really simple. All of this with full responsive capabilities.

Tired of searching for a simple, really customizable and powerful grid system?


A Sassy version of Dan Eden’s Animate.css.



Breakpoint makes writing media queries in Sass super simple.


Sass Burger

A Sass mixin for creating hamburger icons.

hamburger icon


The scss filter library.

The Photo Filter SCSS Mixin Library

Ultimate arrow mixin

A mixin that handle arrow with border, on pretty much any side of a box you want to.

arrow mixin

Shadow Mixin

The shadow mixin that lets you specify shadow direction by angle.

shadow mixin

SCSS triangles mixin

A SCSS mixin for creating triangles on the edge of a container. You can specify the position, orientation dimensions and color.

A mixin for creating triangles on an edge of a container.

Hollow Buttons Sass Mixin

A sass mixin for easy solid/hollow button styling. Just set the background and color values, and specify whether it is a “solid” or “hollow” style button.


Responsive Table Sass Mixin

Have Any number of heading columns you want, the mixin works with any number.

sass responsive table

Hover effects with scss

A small collection of stylish effects with Scss.

hover effect

CSS text-shadow and pattern effects

This pen experiments with some simple text effects you can create using text-shadow and hover transitions. I’ve also played around with creating a patterned hover text effect, mixing those effects with a bit of SVG.

hover effectt

Type Height Mixin

Automatically create a EM valued font style with automatic line-height.

type height


With this SCSS mixin you’ll be able to horizontally AND vertically center blocks of text dynamically, with ease.


Sass flat-button generator

A Sass mixin that creates flat buttons with custom icons in variable positions.

flat button sass

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.