Awesome Sass

A curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources.

Getting Started

Official Sass and SCSS Guide - Official Sass and SCSS guide.
Tutorialzine - Learn SASS in 15 minutes tutorial.
Codecademy - Learn Sass with Codecademy.
Lynda - Learn how to use Sass, from beginner basics to advanced techniques, with online video tutorials taught by industry experts.
Official Sass and SCSS Reference - Official Sass and SCSS Documentation Reference.
SitePoint Sass and SCSS Reference - SitePoint Sass and SCSS reference.

Bootstrap 4 - Bootstrap version 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap 3 - Bootstrap version 3, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Foundation for Sites - The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
Scooter - An SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox.
Sierra - A micro SCSS library to help you build websites, without all the arbitrary selectors.
Kickoff - Kickoff is a lightweight front-end framework for creating scalable, performant and responsive sites.
Hocus-Pocus - A universal and lightweight stylesheet starter kit that focuses on base html elements and typography.
Materialize - A modern responsive front-end framework based on Material Design.

###Grid

csswizardry-grids - Simple, fluid, nestable, flexible, Sass-based, responsive grid system.
Gridlex - Flexbox grid system.
Neat - A lightweight semantic grid framework built with Sass.
SCSS Flexible Grid System - SCSS flexible grid system.
Sass Flexible Grid System - Sass flexible grid system.
Susy - Responsive layout toolkit for Sass.
Avalanche - Lightweight, responsive, Sass-based, BEM-syntax grid system.
Toast - A flexible and lightweight grid framework from the creator of animate.css.

###Media Queries

include-media - Simple, elegant and maintainable media queries.
Sass MediaQueries - A collection of useful media queries mixins for Sass (including iOS devices, TVs and more).
Sass MQ - A Sass mixin that helps you compose media queries in an elegant way.
Breakpoint - Breakpoint makes writing media queries in Sass super simple.

###Color

scss-blend-modes - Using standard color blending functions in Sass.
brand-colors - 1100+ collection of popular brand colors available in Sass, Less, Stylus and CSS.
Open color - Open color is a color scheme for UI design. Available in CSS, SCSS, LESS, Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch palette.

###Typography

Sassline - Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.
Typi - A sass mixin to make responsive typography easy.
Sassy-Gridlover - Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.

###Animation

Sass Burger - A Sass mixin for creating animated hamburger icon.
SpinThatShit - A set of SCSS mixins for single element loaders and spinners.
Animate.scss - A port of Dan Eden's Animate.css for SASS.
Hover - A collection of CSS3 powered hover animated effects to be applied to links, buttons, logos, SVG, featured images and so on. Available in CSS, Sass, and LESS.

###Miscellaneous

Bourbon - A simple and lightweight mixin library for Sass.
Family.scss - 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.
normalize-scss - Sass/Compass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers.
Buttons - A CSS button library built using Sass and Compass.
Modular Scale - Modular scale calculator built into your Sass.
SassDoc - Documentation system (like JSDoc for JavaScript) to build pretty and powerful docs in the blink of an eye.
Scut - A collection of Sass utilities to ease and improve the implementations of common style-code patterns.
Sass flexbox mixin - A set of mixins for those who want to mess around with flexbox using the native support of current browsers.
Angled Edges - A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
retina.js - JavaScript, SCSS, Sass, Less, and Stylus helpers for rendering high-resolution image variants.
Sass Accoutrement - Accoutrement modules are Sass toolkits that work together to form the central configuration of a project. The tools can be used individually, or integrated for extra power.
Sassdash - The Sass implementation of lodash (API documentation).
Juice - A collection of Sass mixins and functions.

Hugo Giraudel's Sass Guidelines - Guidelines for writing sane, maintainable and scalable Sass.
BigCommerce Sass Coding Guidelines - Guidelines in use at BigCommerce.
Airbnb Sass and CSS Style Guide - Sass and CSS style guide by Airbnb.
edX Sass and CSS Style Guide - Sass and CSS style guide by edX.
Dropbox (S)CSS Style Guide - Dropbox’s (S)CSS authoring style guide.