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

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

Toolkit for Responsive Web Design and Progressive Enhancement with Compass.

Andy.scss

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

Typecsset

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

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

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

Jeet.gs/

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

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.

Gridle

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.

Animate-scss

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

Breakpoint

Breakpoint makes writing media queries in Sass super simple.

Sass Burger

A Sass mixin for creating hamburger icons.

Sassmatic

The scss filter library.

Ultimate arrow mixin

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

Shadow Mixin

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

SCSS triangles mixin

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

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.

Hover effects with scss

A small collection of stylish effects with Scss.

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.

Type Height Mixin

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

centerEl

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.