Awesome Sass

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

• Use command + F or ctrl + F to search for a keyword.
• Contributions welcome, please see contribution guide.

Contents

• About
• Getting Started
• Sass vs SCSS
• Frameworks
• Libraries and Mixins
• Grid
• Media Queries
• Color
• Typography
• Animation
• Miscellaneous
• Style Guides
• Articles
• Tools
• Books
• Videos
• Community

About

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as "SCSS" (for "Sassy CSS"), and is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just "Sass"). Inspired by Haml's terseness, it's intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

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.

Sass vs SCSS

• SitePoint - What’s the difference between Sass and SCSS?
• The Sass Way - Which syntax is better?
• Stack Overflow - What's the difference between SCSS and Sass?

Frameworks

• avalanche - Framework for building the foundation for a package based CSS workflow.
• Bootstrap 4 - Bootstrap version 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
• Bootstrap-sass - Official Sass port of Bootstrap 2 and 3.
• Bulma - Modern CSS framework based on Flexbox.
• Cirrus - A component and utility centric SCSS framework designed for rapid prototyping.
• 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.
• Hocus-Pocus - Universal and lightweight stylesheet starter kit that focuses on base html elements and typography.
• iotaCSS - Open source Sass-based OOCSS framework built for scale.
• Kickoff - Kickoff is a lightweight front-end framework for creating scalable, performant and responsive sites.
• Materialize - Modern responsive front-end framework based on Material Design.
• mini.css - Minimal, responsive, style-agnostic CSS framework.
• Scooter - SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox.
• Sierra - Micro SCSS library to help you build websites, without all the arbitrary selectors.

Libraries and Mixins

Grid

• Avalanche - Lightweight, responsive, Sass-based, BEM-syntax grid system.