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.
Sass
GitHub repository ↗ synced 2026/8/9
Awesome Sass
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.
csswizardry-grids
Simple, fluid, nestable, flexible, Sass-based, responsive grid system.
Griddle
Extremely flexable CSS grid constructor.
Gridlex
Flexbox grid system.
Jeet
Simple fractional grid system for Sass and Stylus.
Neat
Lightweight semantic grid framework built with Sass.
Sass Flexible Grid System
Sass flexible grid system.
SCSS Flexible Grid System
SCSS flexible grid system.
Susy
Responsive layout toolkit for Sass.
Toast
Flexible and lightweight grid framework from the creator of [animate.css](https://daneden.github.io/animate.css/).
Waffle Grid
Easy to use flexbox grid system.
Media Queries
Breakpoint
Breakpoint makes writing media queries in Sass super simple.
include-media
Simple, elegant and maintainable media queries.
mq-scss
An extreamly powerful but easy to use Sass media query mixin.
Sass MediaQueries
Collection of useful media queries mixins for Sass (including iOS devices, TVs and more).
Sass MQ
Sass mixin that helps you compose media queries in an elegant way.
Color
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.
sass-planifolia
Advanced color manipulation and contrast calculation in vanilla Sass.
scss-blend-modes
Using standard color blending functions in Sass.
Typography
Sassline
Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.
Sassy-Gridlover
Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.
Shevy
Typography made easy. A vertical rhythm library.
Typi
Sass mixin to make responsive typography easy.
Animation
Animate.scss
Port of Dan Eden's [Animate.css](https://daneden.github.io/animate.css/) for SASS.
Hover
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.
Kf
Sass mixin library for creating keyframe-based animations from maps.
Sass Burger
Sass mixin for creating animated hamburger icon.
SpinThatShit
Set of SCSS mixins for single element loaders and spinners.
Miscellaneous
Angled Edges
Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
Bourbon
Simple and lightweight mixin library for Sass.
Buttono
A flexible Sass mixin for creating BEM-style buttons.
Buttons
CSS button library built using Sass and Compass.
csstyle
A SCSS library to help you build modular CSS that generates your selectors for you and deals with specificity automatically.
Family.scss
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.
Gerillass
A Sass mixin library to help you create modern web sites.
Juice
Collection of Sass mixins and functions.
Modular Scale
Modular scale calculator built into your Sass.
normalize-scss
Sass/Compass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers.
Pretty checkbox
SCSS/CSS library to beautify checkbox and radio buttons.
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.
Sass Deprecate
Sass mixin that helps managing code deprecation.
Sass flexbox mixin
Set of mixins for those who want to mess around with flexbox using the native support of current browsers.
Sassdash
The Sass implementation of lodash ([API documentation](http://davidkpiano.github.io/sassdash)).
Scut
Collection of Sass utilities to ease and improve the implementations of common style-code patterns.
Style Guides
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.
Dropbox (S)CSS Style Guide
Dropbox’s (S)CSS authoring style guide.
Articles
Hugo Giraudel Personal Awesome Sass List
Records of Hugo Giraudel's works on Sass.
Tools
dart-sass
Dart implementation of Sass.
diamond
Dependency management built for Sass, Less, and CSS.
libsass-python
Binding of libsass for Python.
libsass
C/C++ implementation of a Sass compiler.
node-sass-magic-importer
Custom node-sass importer for selector specific imports, node importing, module importing, globbing support and importing files only once.
node-sass
Node.js bindings to libsass.
OctoLinker
Navigate through *.scss and *.sass files efficiently with the OctoLinker browser extension for GitHub.
sass-extract
Extract variables from scss files. Use scss to describe styles for use in javascript by extracting computed styles into js objects. Supports imports and advanced language features.
sass-loader
Sass loader for webpack.
sass-rails
Ruby on Rails stylesheet engine for Sass.
SassDoc
Documentation system (like JSDoc for JavaScript) to build pretty and powerful docs in the blink of an eye.
Scout-App
Process your Sass and SCSS files into CSS without needing any knowledge of the command line.
scss-lint
Configurable tool for writing clean and consistent SCSS. [(deprecated)](https://github.com/brigade/scss-lint#notice-consider-other-tools-before-adopting-scss-lint)
SharpScss
P/Invoke .NET wrapper around libsass to convert SCSS to CSS supporting NET2.0/NET3.5/NET4.x+ and CoreCLR platform.
stylelint
A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets. Supports CSS-like syntaxes, including SCSS.