The best collection of SASS resources & tools for web developers. This includes Frameworks, Compilers, SASS Mixins library and more..

CSS preprocessors are ben around for a while, but they started gaining popularity in last several years. CSS preprocessors are scripting language that extends CSS and compiled into regular CSS syntax.

SASS is a well known CSS preprocessor that adds functionality to CSS to extend the capabilities of CSS. It has a CSS type syntax, so it is easy to learn. SASS will easily compile to CSS, so you can use it any web site. There are many advantages of using Sass in web design projects. SASS allow us to write reusable neat and clean CSS code. SASS has the variable functionality like many other programming languages have, variables extends the capability of CSS. While working with SASS you don’t need to touch your actual CSS file so things will be neat and tidy.

See also : Ultimate CSS Resources (CSS Tools, Frameworks, Ebooks, Snippets..)

Learing SASS is an added advantage if you are a front-end, developer. It is pretty easy to learn SASS if you already know CSS. This post is an ultimate resource of SASS. If you are looking for SASS tools and resource, you don’t need to go elsewhere. We will update this post time to time so please follow us to keep updated.

Frameworks

Sculpt

Sculpt

Sculpt is a free lightweight, mobile first, responsive HTML, CSS (and SASS) framework.

Source

Bootstrap Sass

Bootstrap Sass

Bootstrap Sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.

Source

Skeleton Sass

Skeleton Sass

Skeleton Sass is a Responsive Sass Framework. Skeleton Sass is a highly modularized version of Skeleton CSS [written in Sass].

Source

Penguin

Penguin

Penguin is a lightweight and extensible front-end framework built with Sass to kickstart any web project.

Source

Flint

Flint

Flint is a responsive grid framework written in Sass, created to allow developers to rapidly produce responsive layouts that are built on a sophisticated foundation.

Source

Archetype

Archetype

Archetype is a Compass/Sass based framework for authoring configurable, composable UI components and patterns.

Source

Maze

Maze

Maze is a Responsive Sass Framework. Maze is a responsive grid built using Sass and HTML5, the grid is easily customisable with editable options for grid columns, gutter widths, break points and push values.

Source

Hoisin.scss

Hoisin.scss

A simple responsive mini framework to kick start your project, written in Sass.

Source

flexible.gs

flexible.gs

Flexible Grid System is a Responsive CSS Framework (CSS, Sass, Less and Stylus).

Source

Singularity

Singularity

Singularity is a next generation grid framework built from the ground up to be responsive. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints. Ratio based math also allows for non-uniform grids in any unit you want to use.

Source

Compass

Compass

Compass is an open-source CSS Authoring Framework. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.

Source

Bourbon Neat

Frameless

Neat is a semantic grid framework built on top of Sass and Bourbon.

Source

Frameless

Frameless

The spiritual successor to Less Framework.

Source

Foundation

Foundation

Foundation is a responsive front-end framework made by ZURB. Setting up Foundation 5 Sass is quick and easy!

Source

Compass.app

Compass.app

Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of plain CSS.Compass.app is a menubar only app for Sass and Compass. It helps designers compile stylesheets easily without resorting to command line interface.

Source

Fluid-email

Fluid-email

Mobile-first email framework build with scss.

Source

Refills

Refills

Components and patterns built with Bourbon and Neat.

Source

Mice

Mice

Mice is semantic front-end framework.

Source

Bitters

Bitters

Add a dash of pre-defined style to your Bourbon.

Source

ApplePie

ApplePie

ApplePie Toolkit is modular and responsive CSS framework.

Source

GUFF

GUFF

Guff is a SASS helper framework comprised of all of my favorite features from the top SASS frameworks.

Source

Pure CSS for Sass

Pure CSS for Sass

Pure CSS framework by Yahoo, converted to Sass and ready to use in Sass powered applications.

Source

SassySkeleton

SassySkeleton

A boilerplate for better structured styles based on Sass & Compass.

Source

Luigi

Luigi

Luigi is a Bozboz Sass Framework. Luigi is the Scss library developed by the developers at Bozboz and the rest of the world.

Source

Grids & Layouts

Zen Grids

Zen Grids

Zen Grids is a responsive grid system built with Compass and Sass.

Source

Gridset

Gridset

Gridset is a tool that allows you to create sets of responsive grids for your site. Gridset provides a gridset.scss file complete with Sass mixins and functions derived from your grid set measurements.

Source

MUELLER GRID SYSTEM

MUELLER GRID SYSTEM

MUELLER is a modular grid system for responsive/adaptive and non-responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media-queries.

Source

fGrid

fGrid

fGrid is a responsive and customisable grid system for Sass styled websites. It’s built to be flexible and small and is suitable for a wide range of projects.

Source

Sassaparilla

Sassaparilla

Sassaparilla is a fast way to start your responsive web design projects that harnesses the power of Sass and Compass.

Source

Susy

Susy

Susy is a responsive layout toolkit for Sass. Susy is an agnostic set of tools for creating powerful, custom layouts. We provide the language, but you provide all the opinions. Use a grid, don’t use a grid, or use a combination of grids — it’s all up to you.

Source

chewing-grid.css

chewing-grid.css

The chewing-grid is the ideal CSS Grid for card listing design.

Source

SASS Grid System

SASS Grid System

Grid System Bootstrap adequacy of the SASS of an alternative way.

Source

Gridlines

Gridlines

Gridlines is a Sass mixin that generates image-less grid backgrounds with ease. This eliminates having to create and recreate a bitmap image every time you want to experiment with a new set of measurements or viewport dimensions.

Source

Thumper

Thumper

Thumper is a simple and very light responsive grid system built with speed and simplicity in mind.

Source

Compilers

Prepros

Prepros

Prepros is a tool to compile LESS, Sass, Compass, Stylus, Jade and much more with automatic CSS prefixing, It comes with built in server for cross browser testing. It runs on Windows, Mac OSX and Linux.

Source

CodeKit

CodeKit

CodeKit compiles Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript, TypeScript, Markdown and Compass files automatically each time you save. Easily set options for each language on a file-by-file basis.

Source

LiveReload

LiveReload

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

Source

LibSass

LibSass

A C/C++ implementation of a Sass compiler.

Source

Koala

Koala

Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.

Source

Playgrounds

CodePen

CodePen

CodePen is an HTML, CSS, and JavaScript editor in the browser. Sass, LESS, Stylus, PostCSS. Markdown, Haml, Slim, Jade. Just some of the preprocessor syntaxes you can use on CodePen.

Source

Fiddle Salad

Fiddle Salad

SASS and HTML editor with sytax highlighting and code completion. Style changes are updated instantly without reloading the results.

Source

SassMeister

SassMeister

SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.

Source

Testing

Ghostlab

Ghostlab

Ghostlab is a Mac based testing tool to ensure your responsive site works well across all devices.

Source

Bootcamp

Bootcamp

Jasmine-style BDD testing written in Sass for Sass.

Source

Modernizr mixin

modernizr-mixin

Simple and comprehensive mixin for Modernizr tests in Sass.

Source

SassyTester

SassyTester

SassyTester is a minimalistic function tester in Sass.

Source

Typography

Typesettings

Typesettings

A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.

Source

Modular Scale

Modular Scale

Modular scale calculator built into your Sass.

Source

Sassline

Sassline

Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.

Source

Typeplate

Typeplate

Typeplate is a typographic starter kit.

Source

Responsive Modular Scale

Responsive Modular Scale

This is a responsive extension of the Sass team’s modular-scale add-on. A modular typographic scale gives you a set of predefined values to use in your design, based on one or more base sizes and one or more intervals.

Source

Typographic

Typographic

Typographic is responsive typography made easy. Pick a few font stacks, set a few settings, and you’ve got beautiful responsive typography – it’s that easy.

Source

Sassy Gridlover

Sassy Gridlover

Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.

Source

Knife

Knife

Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of SASS/SCSS variables, functions and mixins.

Source

Shevy

Shevy

Vertical rhythm made easy. Typography how you want it, where you want it.

Source

Typey

Typey

A complete framework for working with typography on the web.

Source

Harmon

Harmon

A simple typographic scale written in Sass.

Source

Color

Sass Colour Function Calculator

Sass Colour Function Calculator

A tool for calculating the Sass colour function required to get from one colour to another.

Source

SassMe

SassMe

A nifty tool to visualize SASS Color functions and generate the code for use in your .sass/.scss files.

Source

SassyGradients

SassyGradients

A powerful wrapper to handle CSS gradients in Sass.

Source

Sassy-palette

Sassy-palette

Color palette agnostic tool for designers and front-end developers. Sassy-palette manages complex color palettes and simplifies design process by giving a nice API for outputting predefined or random colors and their tones.

Source

Chroma

Chroma

Chroma is a Sass library that manages a project’s color names, color variations, and color schemes.

Source

Color Schemer

Color Schemer

Color schemer is a robust color toolset for Sass.

Source

Sass Material Colors

Sass Material Colors

An easy way to use Google’s Material Design colors in your Sass/Scss project.

Source

Sass hwb

Sass hwb

A Sass function for the HWB color model.

Source

Buttons

Sassy Buttons

Sassy Buttons

Super sassy and super easy CSS3 buttons.

Source

CSS3 buttons

CSS3 buttons

This is a collection of CSS3 buttons that use the simplest possible markup. These buttons are now implemented using Sass, with help from Bourbon.

Source

Buttons 2.0

Buttons 2.0

A CSS button library built using Sass and Compass.

Source

Zocial CSS social buttons

Zocial CSS social buttons

Zocial button set with CSS. Entirely vector-based social buttons.

Source

Button-collection.scss

Button-collection.scss

A collection of buttons made with SASS.

Source

Icons

Sass Burger

Sass Burger

A Sass mixin for creating hamburger icons.

Source

SassyIcons

SassyIcons

Flexible system to manipulate icons, SVG, PNG, sprites.

Source

Sass Icon Font mixins

Sass Icon Font mixins

This is a simple Bower package for creating a custom CSS listing of icon fonts in your project.

Source

Smooth Drop

Smooth Drop

A simple snippet of CSS for adding smooth “cubic-bezier” animation to Bootstrap dropdown menus.

Source

Responsive SASS Navigtion

Responsive SASS Navigtion

A light-weight, easy-to-use, responsive navigation built using SASS. Use SASS variables to easily customize your own menu.

Source

Plugins

Compass Retinator

Compass Retinator

This Compass extension will allow you to create retina ready sprites from scratch.

Source

Compass Grails Plugin

Compass Grails Plugin

Compass, SASS and SCSS support for Grails. Automatically compiles .scss/.sass during run-app, and adds other framework functionality.

Source

Coda Sass Plugin

Coda Sass Plugin

This is a Sass plug-in for Panic’s Coda. This plug-in converts scss files into css files. You can set it up to automatically convert on save. By default you must manually process scss files via the Coda Plug-ins menu.

Source

Gulp Compass Imagehelper

Gulp Compass Imagehelper

Gulp plugin for polyfilling the compass imagehelper functions in node-sass enviroments.

Source

Easy Sprites v1.0

Easy Sprites v1.0

Spriting plugin for SASS/Compass.

Source

Cleaning

SCSS-Lint

SCSS-Lint

SCSS-Lint is a tool to help keep your SCSS files clean and readable. You can run it manually from the command-line, or integrate it into your SCM hooks.

Source

Resolution

HiDPI

HiDPI

HiDPI is a Sass mixin that seamlessly serves high resolution background images to high density (Retina-like) displays.

Source

Sass Resolution

Sass Resolution

Sass mixin to target high density screens.

Source

API

SassyJSON

SassyJSON

SassyJSON is a Sass-powered API for JSON. It provides you the classic json-encode and json-decode directly from your Sass files.

Source

SassyCast

SassyCast

SassyCast is a simple API for type conversion in Sass.

Source

Converters & Generators

Atomic Docs

Atomic Docs

Front end style guide generator and Sass partial manager. Atomic Docs is built with Sass and PHP.

Source

Retina Icon Sprites

Retina Icon Sprites

Retina Icons Sprite is a Sass Mixins is generator tool for for front-end developers to easily integrate Retina Icons in your website.

Source

SASS Em

SASS Em

Sass function and mixin to convert px in em.

Source

SassyIteratorsGenerators

SassyIteratorsGenerators

Iterators and generators implementation in Sass.

Source

Spinners

Spinners

A Sass mixin to generate pure CSS3 loading indicators. Uses a single rotating element and a partial border. Fully customizable. Works with plain Sass or Compass.

Source

WordPress

Forge

Forge

Forge is a free command-line toolkit for bootstrapping and developing WordPress themes in a tidy environment using front-end languages like Sass, LESS, and CoffeeScript.

Source

Sass Mixins/Functions Library

Family.scss

Family.scss

Family.scss is a set of 26 smart Sass mixins which will help you to manage the style of :nth-child’ified elements, in an easy and classy way.

Source

Bourbon

Bourbon

Bourbon is a lightweight Sass tool set that helps you write more effective stylesheets.

Source

Juice

Juice

Juice is a collection of Sass mixins/functions that are used to minimize the work needed to apply styling/properties to elements.

Source

Sass MediaQueries

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.

Source

Mussarela

Mussarela

An useful and simple set of SASS mixins!

Source

Saffron

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.

Source

Sunglass

Sunglass

A mixin and functions library for Sass.

Source

Tipsy.sass

Tipsy.sass

A Simple Mixin Tooltip CSS Using Sass.

Source

include-media

include-media

include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

Source

bemify

bemify

Bemify is a set of Sass mixins to help you write well-structured, readable, maintainable, component-based modular SCSS source using a BEM-style syntax.

Source

Breakpoint

Breakpoint

Breakpoint makes writing media queries in Sass super simple.

Source

Hammer

Hammer

Hammer is a web development tool for web designers & developers. Build out static HTML sites & templates quickly and easily. Built-in support for SASS (with Bourbon), CoffeeScript, HAML & Markdown, as well as special Hammer tags.

Source

MVCSS

MVCSS

MVCSS [Modular View CSS] is a Sass-based CSS architecture for creating predictable and maintainable application style.

Source

Sass Doc

Sass Doc

A documentation tool for Sass.

Source

Sassy Starter

Sassy Starter

A starter toolkit based on Scalable and Modular Architecture for CSS SMACSS for Sass (SCSS) projects.

Source

Titon Toolkit

Titon Toolkit

Titon Toolkit is a collection of very powerful user interface components, behaviors, and utility classes for the responsive, mobile, and modern web. Each component represents encapsulated HTML, CSS, and JavaScript functionality for role specific page elements.

Source

Scut

Scut

Sass utilities for the frontend laborer.

Source

SASS Rem

SASS Rem

Sass mixin and function to use rem units with pixel fallback.

Source

Sassifaction

Sassifaction

A Sass mixin library.

Source

Animate.sass

Animate.sass

Animate.sass is a Sass and Compass CSS animation library for WebKit, Firefox and beyond based on the work being done by Dan Eden in Animate.css.

Source

ZUI

ZUI

ZUI is a pattern library developed for Zource. This library is a collection of commont user interface elements that are used in advanced web applications. Zource makes use of these elements. It is important to realize that ZUI is not designed for your average daily website. It’s meant to be used in web-applications.

Source

Sassy-validation

Sassy-validation

Sass data type validation library.

Source

sass-config-manager

sass-config-manager

A dot-syntax configuration (Map) library for Sass (mixin / function).

Source

Sassy-exists

Sassy-exists

Sassy-exists is Sass micro library for existence checks.

Source

BEM Constructor

BEM Constructor

BEM Constructor is a Sass library for building immutable and namespaced BEM-style CSS objects.

Source

SASS NAMED COLORS

SASS NAMED COLORS

A Sass micro-library featuring a standardized list of 1,500+ named colors.

Source

SASS FONT STACKER

SASS FONT STACKER

This Sass micro-library provides a simple way to work with a pre-defined set of presumably web-safe font stacks. Two functions and a single mixin provide a bit of syntactic sugar to make it easier to prepend any of the existing fonts stacks with an arbitrary number of fonts.

Source

Rocket 2.0

Rocket 2.0

Rocket is a powerful SASS library to help web developers handle layout, color and other components.

Source

sass-convert

sass-convert

sass-convert is a library that provides binding for Node.js to sass-convert, the converter shipped with Sass. Integrates the converter in a stream pipeline.

Source

SassySort

SassySort

Several ways to sort values in Sass using popular sorting algorithms.

Source

SassyMatrix

SassyMatrix

All you ever wanted to deal with matrices in Sass.

Source

SassyBitwise

SassyBitwise

Bitwise operators in Sass.

Source

SassyLogger

SassyLogger

A powerful logger to handle error and warning messages in Sass.

Source

SassyStrings

SassyStrings

A collection of Sass functions to manipulate strings.

Source

Flask

Flask

This project is a collection of helpful functions and mixins for use in Sass projects using the SCSS syntax.

Source

Sass FPO

Sass FPO

Create CSS-Only placeholder images. I’m using the term “FPO” (For Placement Only) because “placeholder” is already a keyword in Sass and things would get confusing fast.

Source

Sassy-border

Sassy-border

Sassy-border is Sass shorthand mixin for border properties.

Source

Quantity Queries mixins

Quantity Queries mixins

Simple quantity queries mixins for Sass.

Source

Front-End Toolkit

Front-End Toolkit

This project is a collections of resources, best practices and tools for front-end developers. Is made to help unify workflow and standardize the code inside our team.

Source

Sassdash

Sassdash

The Sass implementation of lodash.

Source

SassFunk

SassFunk

A collection of Sass utility functions.

Source

Sass Initials Avatar

Sass Initials Avatar

Create easy to configure initials avatars like Google Inbox or Apple mail.

Source

Sassy Export

Sassy Export

Sassy Export is a lightweight Sass extension that allows you to export an encoded Sass map into an external JSON file. Use it anyway you like.

Source

Blog & Community

The Sass Way

The Sass Way

This is the main repository for The Sass Way! Your source for the latest tips, tricks, and news about Sass and Compass.

Source

Sache

Sache

Find Sass and Compass Extensions for your next project.

Source

Sass Break

Sass Break

Sass break is a humble new blog for the Sass community.

Source

Sass Guidelines

Sass Guidelines

The Sass Guidelines project has been translated into several languages by generous contributors.

Source

Sass Compatibility

Sass Compatibility

Sass Compatibility is to provide a list of inconsistencies between different Sass engines.

Source

SassyLists

SassyLists

SassyLists is a toolbox providing you all the functions you need to manipulate your Sass lists.

Source

Conferences & Meetups

SassConf

SassConf

A conference for front-end developers and designers that love Sass and are passionate about building a better, more beautiful web.

Source

Camp Sass

Camp Sass

Camp Sass was a blast. We had so much fun meeting everyone and learning from our great speakers.

Source