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.
- About
- Getting Started
- Sass vs SCSS
- Frameworks
- Libraries and Mixins
- Style Guides
- Articles
- Tools
- Books
- Videos
- Community
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
.
- 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?
- π avalanche - Framework for building the foundation for a package based CSS workflow.
167472β
78363π΄
Bootstrap 4) - Bootstrap version 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.12608β
3539π΄
Bootstrap-sass) - Official Sass port of Bootstrap 2 and 3.48586β
3920π΄
Bulma) - Modern CSS framework based on Flexbox.1321β
76π΄
Cirrus) - A component and utility centric SCSS framework designed for rapid prototyping.29606β
5513π΄
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.
- 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.
2987β
260π΄
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.
3875β
349π΄
Susy) - Responsive layout toolkit for Sass.- Toast - Flexible and lightweight grid framework from the creator of π animate.css.
- π Waffle Grid - Easy to use flexbox grid system.
2093β
142π΄
Breakpoint) - Breakpoint makes writing media queries in Sass super simple.- π include-media - Simple, elegant and maintainable media queries.
124β
8π΄
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).
1984β
142π΄
Sass MQ) - Sass mixin that helps you compose media queries in an elegant way.
- brand-colors - 1100+ collection of popular brand colors available in Sass, Less, Stylus and CSS.
5200β
242π΄
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.40β
3π΄
sass-planifolia) - Advanced color manipulation and contrast calculation in vanilla Sass.820β
128π΄
scss-blend-modes) - Using standard color blending functions in Sass.
- π Sassline - Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.
220β
12π΄
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.
860β
43π΄
Typi) - Sass mixin to make responsive typography easy.
662β
104π΄
Animate.scss) - Port of Dan Eden's π 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.
655β
54π΄
Sass Burger) - Sass mixin for creating animated hamburger icon.- π SpinThatShit - Set of SCSS mixins for single element loaders and spinners.
967β
45π΄
Angled Edges) - Sass mixin for creating angled edges on sections by dynamically encoding SVGs.- Bourbon - Simple and lightweight mixin library for Sass.
88β
6π΄
Buttono) - A flexible Sass mixin for creating BEM-style buttons.5045β
866π΄
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.
1985β
134π΄
Modular Scale) - Modular scale calculator built into your Sass.1435β
254π΄
normalize-scss) - Sass/Compass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers.1807β
151π΄
Pretty checkbox) - SCSS/CSS library to beautify checkbox and radio buttons.4429β
619π΄
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.
270β
7π΄
Sass Deprecate) - Sass mixin that helps managing code deprecation.1120β
237π΄
Sass flexbox mixin) - Set of mixins for those who want to mess around with flexbox using the native support of current browsers.389β
19π΄
Sassdash) - The Sass implementation of lodash (API documentation).769β
61π΄
Scut) - Collection of Sass utilities to ease and improve the implementations of common style-code patterns.
- π Hugo Giraudel's Sass Guidelines - Guidelines for writing sane, maintainable and scalable Sass.
280β
29π΄
BigCommerce Sass Coding Guidelines) - Guidelines in use at BigCommerce.6869β
1409π΄
Airbnb Sass and CSS Style Guide) - Sass and CSS style guide by Airbnb.1084β
78π΄
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
- π Aesthetic Sass 3: Typography and Vertical Rhythm
- π A Tale of CSS and Sass Precision
- π Build a Style Guide Straight from Sass
- π Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do
- π The 80-20 Approach to Sustainable SCSS
- π Advanced Use of Sass Maps
3797β
347π΄
dart-sass) - Dart implementation of Sass.- π diamond - Dependency management built for Sass, Less, and CSS.
553β
54π΄
libsass-python) - Binding of libsass for Python.4314β
459π΄
libsass) - C/C++ implementation of a Sass compiler.292β
28π΄
node-sass-magic-importer) - Custom node-sass importer for selector specific imports, node importing, module importing, globbing support and importing files only once.8484β
1322π΄
node-sass) - Node.js bindings to libsass.5244β
280π΄
OctoLinker) - Navigate through *.scss and *.sass files efficiently with the OctoLinker browser extension for GitHub.187β
38π΄
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.3896β
422π΄
sass-loader) - Sass loader for webpack.863β
332π΄
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.
3632β
469π΄
scss-lint) - Configurable tool for writing clean and consistent SCSS.3632β
469π΄
(deprecated))54β
10π΄
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.
- π Sass in the Real World: Book I of IV
- π Sass in the Real World: Book II of IV
- π Jump Start Sass: Get Up to Speed With Sass in a Weekend
- π Sass and Compass for Designers
- π Sass Tutorial
- π Series of Sass tutorials showing the installing of, the basics, and using key features
- π Sass or LESS? What should you use?
- π Learn Sass in this Free Crash Course - Give your CSS Superpowers!
- π The Net Ninja Sass playlist
- π Reddit
- Stack Overflow
- π @SassCSS on Twitter
1857β
135π΄
Famolus/awesome-sass)