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.
CATEGORIES
Frameworks
Sculpt
Sculpt is a free lightweight, mobile first, responsive HTML, CSS (and SASS) framework.
Bootstrap Sass
Bootstrap Sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.
Skeleton Sass
Skeleton Sass is a Responsive Sass Framework. Skeleton Sass is a highly modularized version of Skeleton CSS [written in Sass].
Penguin
Penguin is a lightweight and extensible front-end framework built with Sass to kickstart any web project.
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.
Archetype
Archetype is a Compass/Sass based framework for authoring configurable, composable UI components and patterns.
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.
Hoisin.Scss
A simple responsive mini framework to kick start your project, written in Sass.
Flexible.Gs
Flexible Grid System is a Responsive CSS Framework (CSS, Sass, Less and Stylus).
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.
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.
Bourbon Neat
Neat is a semantic grid framework built on top of Sass and Bourbon.
Frameless
The spiritual successor to Less Framework.
Foundation
Foundation is a responsive front-end framework made by ZURB. Setting up Foundation 5 Sass is quick and easy!
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.
Fluid-Email
Mobile-first email framework build with scss.
Refills
Components and patterns built with Bourbon and Neat.
Mice
Mice is semantic front-end framework.
Bitters
Add a dash of pre-defined style to your Bourbon.
ApplePie
ApplePie Toolkit is modular and responsive CSS framework.
GUFF
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.
SassySkeleton
A boilerplate for better structured styles based on Sass & Compass.
Luigi
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
Zen Grids is a responsive grid system built with Compass and Sass.
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.
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
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.
Girder
A simple CSS grid for building and prototyping modern websites. Its flexible, semantic and responsive.
Sassaparilla
Sassaparilla is a fast way to start your responsive web design projects that harnesses the power of Sass and Compass.
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.
Chewing-Grid.Css
The chewing-grid is the ideal CSS Grid for card listing design.
Herow
Herow, a time-saving Sass grid system.
SASS Grid System
Grid System Bootstrap adequacy of the SASS of an alternative way.
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.
Thumper
Thumper is a simple and very light responsive grid system built with speed and simplicity in mind.
Compilers
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.
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.
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.
LibSass
A C/C++ implementation of a Sass compiler.
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.
Scout
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.
Playgrounds
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.
Takana
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.
Fiddle Salad
SASS and HTML editor with sytax highlighting and code completion. Style changes are updated instantly without reloading the results.
SassMeister
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
Testing
Ghostlab
Ghostlab is a Mac based testing tool to ensure your responsive site works well across all devices.
True
Unit Tests for Sass.
Bootcamp
Jasmine-style BDD testing written in Sass for Sass.
Modernizr Mixin
Simple and comprehensive mixin for Modernizr tests in Sass.
SassyTester
SassyTester is a minimalistic function tester in Sass.
Typography
Quotation Marks
An easy to use mixin for localized quotation marks in Sass and Compass.
Typesettings
A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.
Modular Scale
Modular scale calculator built into your Sass.
Sassline
Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.
Typeplate
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
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.
Type Heading
A responsive typography tool for headings. Type Heading is a lightweight Compass Extension that lets you easily manage responsive typographic sizing.
Sassy Gridlover
Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.
Knife
Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of SASS/SCSS variables, functions and mixins.
Shevy
Vertical rhythm made easy. Typography how you want it, where you want it.
Typey
A complete framework for working with typography on the web.
Harmon
A simple typographic scale written in Sass.
Color
Sass Colour Function Calculator
A tool for calculating the Sass colour function required to get from one colour to another.
SassMe
A nifty tool to visualize SASS Color functions and generate the code for use in your .sass/.scss files.
SassyGradients
A powerful wrapper to handle CSS gradients in Sass.
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.
Chroma
Chroma is a Sass library that manages a project’s color names, color variations, and color schemes.
Color Schemer
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.
Sass Hwb
A Sass function for the HWB color model.
Buttons
Sassy Buttons
Super sassy and super easy 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.
Buttons 2.0
A CSS button library built using Sass and Compass.
Zocial CSS Social Buttons
Zocial button set with CSS. Entirely vector-based social buttons.
Button-Collection.Scss
A collection of buttons made with SASS.
Icons
Sass Burger
A Sass mixin for creating hamburger icons.
SassyIcons
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
Smooth Drop
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.
Plugins
Compass Retinator
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.
Cleaning
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.
Resolution
HiDPI
HiDPI is a Sass mixin that seamlessly serves high resolution background images to high density (Retina-like) displays.
Sass Resolution
Sass mixin to target high density screens.
API
SassyJSON
SassyJSON is a Sass-powered API for JSON. It provides you the classic json-encode and json-decode directly from your Sass files.
SassyCast
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 Em
Sass function and mixin to convert px in em.
SassyIteratorsGenerators
Iterators and generators implementation in Sass.
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.
WordPress
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.
Sass Mixins/Functions Library
Bourbon
Bourbon is a lightweight Sass tool set that helps you write more effective stylesheets.
Juice
Juice is a collection of Sass mixins/functions that are used to minimize the work needed to apply styling/properties to elements.
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.
Mussarela
An useful and simple set of SASS mixins!
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.
Sunglass
A mixin and functions library for Sass.
Tipsy.Sass
A Simple Mixin Tooltip CSS Using Sass.
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.
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.
Breakpoint
Breakpoint makes writing media queries in Sass super simple.
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.
MVCSS
MVCSS [Modular View CSS] is a Sass-based CSS architecture for creating predictable and maintainable application style.
Sass Doc
A documentation tool for Sass.
Sassy Starter
A starter toolkit based on Scalable and Modular Architecture for CSS SMACSS for Sass (SCSS) projects.
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.
Scut
Sass utilities for the frontend laborer.
SASS Rem
Sass mixin and function to use rem units with pixel fallback.
Sassifaction
A Sass mixin library.
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.
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.
Sassy-Validation
Sass data type validation library.
Sass-Config-Manager
A dot-syntax configuration (Map) library for Sass (mixin / function).
Sassy-Exists
Sassy-exists is Sass micro library for existence checks.
BEM Constructor
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 2.0
Rocket is a powerful SASS library to help web developers handle layout, color and other components.
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.
SassySort
Several ways to sort values in Sass using popular sorting algorithms.
SassyMatrix
All you ever wanted to deal with matrices in Sass.
SassyBitwise
Bitwise operators in Sass.
SassyLogger
A powerful logger to handle error and warning messages in Sass.
SassyStrings
A collection of Sass functions to manipulate strings.
Flask
This project is a collection of helpful functions and mixins for use in Sass projects using the SCSS syntax.
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.
Sassy-Border
Sassy-border is Sass shorthand mixin for border properties.
Quantity Queries Mixins
Simple quantity queries mixins for Sass.
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.
Sassdash
The Sass implementation of lodash.
SassFunk
A collection of Sass utility functions.
Sass Initials Avatar
Create easy to configure initials avatars like Google Inbox or Apple mail.
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.
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.
Sache
Find Sass and Compass Extensions for your next project.
Sass Break
Sass break is a humble new blog for the Sass community.
Sass Guidelines
The Sass Guidelines project has been translated into several languages by generous contributors.
Sass Compatibility
Sass Compatibility is to provide a list of inconsistencies between different Sass engines.
SassyLists
SassyLists is a toolbox providing you all the functions you need to manipulate your Sass lists.
Conferences & Meetups
SassConf
A conference for front-end developers and designers that love Sass and are passionate about building a better, more beautiful web.
Camp Sass
Camp Sass was a blast. We had so much fun meeting everyone and learning from our great speakers.
Source: CSSAuthor
