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.
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.
Sculpt is a free lightweight, mobile first, responsive HTML, CSS (and SASS) framework.
Bootstrap Sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.
Skeleton Sass is a Responsive Sass Framework. Skeleton Sass is a highly modularized version of Skeleton CSS [written in Sass].
Penguin is a lightweight and extensible front-end framework built with Sass to kickstart any web project.
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.
Archetype is a Compass/Sass based framework for authoring configurable, composable UI components and patterns.
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.
A simple responsive mini framework to kick start your project, written in Sass.
Flexible Grid System is a Responsive CSS Framework (CSS, Sass, Less and Stylus).
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.
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.
Neat is a semantic grid framework built on top of Sass and Bourbon.
The spiritual successor to Less Framework.
Foundation is a responsive front-end framework made by ZURB. Setting up Foundation 5 Sass is quick and easy!
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.
Mobile-first email framework build with scss.
Components and patterns built with Bourbon and Neat.
Mice is semantic front-end framework.
Add a dash of pre-defined style to your Bourbon.
ApplePie Toolkit is modular and responsive CSS framework.
Guff is a SASS helper framework comprised of all of my favorite features from the top SASS frameworks.
Pure CSS For Sass
Pure CSS framework by Yahoo, converted to Sass and ready to use in Sass powered applications.
A boilerplate for better structured styles based on Sass & Compass.
Luigi is a Bozboz Sass Framework. Luigi is the Scss library developed by the developers at Bozboz and the rest of the world.
Grids & Layouts
Zen Grids is a responsive grid system built with Compass and Sass.
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.
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.
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.
A simple CSS grid for building and prototyping modern websites. Its flexible, semantic and responsive.
Sassaparilla is a fast way to start your responsive web design projects that harnesses the power of Sass and Compass.
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.
The chewing-grid is the ideal CSS Grid for card listing design.
Herow, a time-saving Sass grid system.
SASS Grid System
Grid System Bootstrap adequacy of the SASS of an alternative way.
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.
Thumper is a simple and very light responsive grid system built with speed and simplicity in mind.
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.
LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.
A C/C++ implementation of a Sass compiler.
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.
Scout is a cross-platform app that delivers the power of Sass & Compass into the hands of web designers. Scout helps make your CSS workflow a snap by delivering more control, optimization, and organization.
Takana is a Sass/CSS live-editor. It lets you see your SCSS and CSS style changes live, in the browser, as you type them.
SASS and HTML editor with sytax highlighting and code completion. Style changes are updated instantly without reloading the results.
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
Ghostlab is a Mac based testing tool to ensure your responsive site works well across all devices.
Unit Tests for Sass.
Jasmine-style BDD testing written in Sass for Sass.
Simple and comprehensive mixin for Modernizr tests in Sass.
SassyTester is a minimalistic function tester in Sass.
An easy to use mixin for localized quotation marks in Sass and Compass.
A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.
Modular scale calculator built into your Sass.
Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.
Typeplate is a typographic starter kit.
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.
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.
A responsive typography tool for headings. Type Heading is a lightweight Compass Extension that lets you easily manage responsive typographic sizing.
Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.
Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of SASS/SCSS variables, functions and mixins.
Vertical rhythm made easy. Typography how you want it, where you want it.
A complete framework for working with typography on the web.
A simple typographic scale written in Sass.
Sass Colour Function Calculator
A tool for calculating the Sass colour function required to get from one colour to another.
A nifty tool to visualize SASS Color functions and generate the code for use in your .sass/.scss files.
A powerful wrapper to handle CSS gradients in Sass.
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.
Chroma is a Sass library that manages a project’s color names, color variations, and color schemes.
Color schemer is a robust color toolset for Sass.
Sass Material Colors
An easy way to use Google’s Material Design colors in your Sass/Scss project.
A Sass function for the HWB color model.
Super sassy and super easy 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.
A CSS button library built using Sass and Compass.
Zocial CSS Social Buttons
Zocial button set with CSS. Entirely vector-based social buttons.
A collection of buttons made with SASS.
A Sass mixin for creating hamburger icons.
Flexible system to manipulate icons, SVG, PNG, sprites.
Sass Icon Font Mixins
This is a simple Bower package for creating a custom CSS listing of icon fonts in your project.
Menu & Navigation
A simple snippet of CSS for adding smooth “cubic-bezier” animation to Bootstrap dropdown menus.
Responsive SASS Navigtion
A light-weight, easy-to-use, responsive navigation built using SASS. Use SASS variables to easily customize your own menu.
This Compass extension will allow you to create retina ready sprites from scratch.
Compass Grails Plugin
Compass, SASS and SCSS support for Grails. Automatically compiles .scss/.sass during run-app, and adds other framework functionality.
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.
Gulp Compass Imagehelper
Gulp plugin for polyfilling the compass imagehelper functions in node-sass enviroments.
Easy Sprites V1.0
Spriting plugin for SASS/Compass.
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.
HiDPI is a Sass mixin that seamlessly serves high resolution background images to high density (Retina-like) displays.
Sass mixin to target high density screens.
SassyJSON is a Sass-powered API for JSON. It provides you the classic json-encode and json-decode directly from your Sass files.
SassyCast is a simple API for type conversion in Sass.
Converters & Generators
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.
Sass function and mixin to convert px in em.
Iterators and generators implementation in Sass.
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.
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.
Sass Mixins/Functions Library
Bourbon is a lightweight Sass tool set that helps you write more effective stylesheets.
Juice is a collection of Sass mixins/functions that are used to minimize the work needed to apply styling/properties to elements.
It’s a collection of useful Media Queries mixins for Sass (including iOS devices, TVs and more). Fully customizable and very easy to use.
An useful and simple set of SASS mixins!
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.
A mixin and functions library for Sass.
A Simple Mixin Tooltip CSS Using Sass.
include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
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.
Breakpoint makes writing media queries in Sass super simple.
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.
MVCSS [Modular View CSS] is a Sass-based CSS architecture for creating predictable and maintainable application style.
A documentation tool for Sass.
A starter toolkit based on Scalable and Modular Architecture for CSS SMACSS for Sass (SCSS) projects.
Sass utilities for the frontend laborer.
Sass mixin and function to use rem units with pixel fallback.
A Sass mixin library.
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.
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.
Sass data type validation library.
A dot-syntax configuration (Map) library for Sass (mixin / function).
Sassy-exists is Sass micro library for existence checks.
BEM Constructor is a Sass library for building immutable and namespaced BEM-style CSS objects.
SASS NAMED COLORS
A Sass micro-library featuring a standardized list of 1,500+ named colors.
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.
Rocket is a powerful SASS library to help web developers handle layout, color and other components.
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.
Several ways to sort values in Sass using popular sorting algorithms.
All you ever wanted to deal with matrices in Sass.
Bitwise operators in Sass.
A powerful logger to handle error and warning messages in Sass.
A collection of Sass functions to manipulate strings.
This project is a collection of helpful functions and mixins for use in Sass projects using the SCSS syntax.
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.
Sassy-border is Sass shorthand mixin for border properties.
Quantity Queries Mixins
Simple quantity queries mixins for Sass.
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.
The Sass implementation of lodash.
A collection of Sass utility functions.
Sass Initials Avatar
Create easy to configure initials avatars like Google Inbox or Apple mail.
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.
Blog & Community
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.
Find Sass and Compass Extensions for your next project.
Sass break is a humble new blog for the Sass community.
The Sass Guidelines project has been translated into several languages by generous contributors.
Sass Compatibility is to provide a list of inconsistencies between different Sass engines.
SassyLists is a toolbox providing you all the functions you need to manipulate your Sass lists.
Conferences & Meetups
A conference for front-end developers and designers that love Sass and are passionate about building a better, more beautiful web.
Camp Sass was a blast. We had so much fun meeting everyone and learning from our great speakers.