A 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.
- Getting Started
- Sass vs SCSS
- Frameworks
- Libraries and Mixins
- Style Guides
- Articles and Resources
- Community
- 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.
- 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?
- 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.
- Hugo Giraudel Personal Awesome Sass List - Records of Hugo Giraudel's works on Sass.
- Cubic Bézier Representation in Sass
- Faster Sass builds with Webpack
- Transitioning to SCSS at Scale
- Sass Maps to UI Components
- Inverse trigonometric functions with Sass
- Stop Arguing So Much with Your Mixins
- Styling React Components in Sass
- A Sass !default use case
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent