25 Handy Sass Mixin Libraries & Snippets

Unlimited Downloads : 300,000+ Design Assets

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.

bourbon

Toolkit

Toolkit for Responsive Web Design and Progressive Enhancement with Compass.

toolkit

Andy.scss

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

andy.scss

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.

typecsset

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.

sass-mediaqueries

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.

Saffron

Compass

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

compass

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.

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.

sassline

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

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?

Animate-scss

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

animate-scss

Breakpoint

Breakpoint makes writing media queries in Sass super simple.

breakpoint

Sass Burger

A Sass mixin for creating hamburger icons.

hamburger icon

Sassmatic

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.

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

centerEl

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

centerel

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