Track Awesome Sass Updates Weekly

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

🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 Famolus/awesome-sass · ⭐ 1.8K · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Nov 09 - Nov 15, 2020

Frameworks

• Cirrus (⭐1.1k) - A component and utility centric SCSS framework designed for rapid prototyping.

Sep 28 - Oct 04, 2020

Libraries and Mixins / Miscellaneous

• Gerillass - A Sass mixin library to help you create modern web sites.

Aug 24 - Aug 30, 2020

Libraries and Mixins / Media Queries

• include-media - Simple, elegant and maintainable media queries.

Mar 09 - Mar 15, 2020

Libraries and Mixins / Miscellaneous

• Buttono (⭐83) - A flexible Sass mixin for creating BEM-style buttons.

Mar 18 - Mar 24, 2019

Frameworks

• avalanche - Framework for building the foundation for a package based CSS workflow.

• Bulma (⭐46k) - Modern CSS framework based on Flexbox.

• 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.

• 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.

• Griddle - Extremely flexable CSS grid constructor.

• Jeet (⭐3k) - Simple fractional grid system for Sass and Stylus.

• SCSS Flexible Grid System - SCSS flexible grid system.

Libraries and Mixins / Media Queries

• Breakpoint (⭐2.1k) - Breakpoint makes writing media queries in Sass super simple.

• mq-scss (⭐126) - An extreamly powerful but easy to use Sass media query mixin.

Libraries and Mixins / Color

• scss-blend-modes (⭐821) - Using standard color blending functions in Sass.

Libraries and Mixins / Typography

• Typi (⭐866) - Sass mixin to make responsive typography easy.

Libraries and Mixins / Animation

• Sass Burger (⭐666) - Sass mixin for creating animated hamburger icon.

• SpinThatShit - Set of SCSS mixins for single element loaders and spinners.

Libraries and Mixins / Miscellaneous

• Angled Edges (⭐971) - Sass mixin for creating angled edges on sections by dynamically encoding SVGs.

• 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.

• Juice - Collection of Sass mixins and functions.

• normalize-scss (⭐1.4k) - Sass/Compass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers.

• Pretty checkbox (⭐1.8k) - SCSS/CSS library to beautify checkbox and radio buttons.

• Sass flexbox mixin (⭐1.1k) - Set of mixins for those who want to mess around with flexbox using the native support of current browsers.

• Sassdash (⭐384) - The Sass implementation of lodash (API documentation).

• Scut (⭐769) - Collection of Sass utilities to ease and improve the implementations of common style-code patterns.

Tools / Miscellaneous

• dart-sass (⭐3.3k) - Dart implementation of Sass.

• diamond - Dependency management built for Sass, Less, and CSS.

• libsass-python (⭐522) - Binding of libsass for Python.

• node-sass-magic-importer (⭐293) - Custom node-sass importer for selector specific imports, node importing, module importing, globbing support and importing files only once.

• OctoLinker (⭐5.1k) - Navigate through *.scss and *.sass files efficiently with the OctoLinker browser extension for GitHub.

• sass-extract (⭐187) - 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.

• 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.

• stylelint - A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets. Supports CSS-like syntaxes, including SCSS.

Dec 17 - Dec 23, 2018

Videos / Miscellaneous

• Learn Sass in this Free Crash Course - Give your CSS Superpowers!

• The Net Ninja Sass playlist

Nov 05 - Nov 11, 2018

Libraries and Mixins / Grid

• Sass Flexible Grid System - Sass flexible grid system.

Libraries and Mixins / Media Queries

• Sass MediaQueries - Collection of useful media queries mixins for Sass (including iOS devices, TVs and more).

Libraries and Mixins / Animation

• Kf - Sass mixin library for creating keyframe-based animations from maps.

Aug 06 - Aug 12, 2018

Articles / Miscellaneous

• Advanced Use of Sass Maps

Jun 04 - Jun 10, 2018

Articles / Miscellaneous

• The 80-20 Approach to Sustainable SCSS

Dec 25 - Dec 31, 2017

Libraries and Mixins / Color

• sass-planifolia (⭐39) - Advanced color manipulation and contrast calculation in vanilla Sass.

Nov 13 - Nov 19, 2017

Libraries and Mixins / Miscellaneous

• 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.

Oct 23 - Oct 29, 2017

Tools / Miscellaneous

• SharpScss (⭐53) - P/Invoke .NET wrapper around libsass to convert SCSS to CSS supporting NET2.0/NET3.5/NET4.x+ and CoreCLR platform.

Sep 25 - Oct 01, 2017

Libraries and Mixins / Grid

• Waffle Grid - Easy to use flexbox grid system.

Jul 17 - Jul 23, 2017

Articles / Miscellaneous

• Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do

May 29 - Jun 04, 2017

Frameworks

• Hocus-Pocus - Universal and lightweight stylesheet starter kit that focuses on base html elements and typography.

Articles / Miscellaneous

• Build a Style Guide Straight from Sass

May 22 - May 28, 2017

Frameworks

• Bootstrap-sass (⭐13k) - Official Sass port of Bootstrap 2 and 3.

• mini.css - Minimal, responsive, style-agnostic CSS framework.

May 01 - May 07, 2017

Frameworks

• iotaCSS - Open source Sass-based OOCSS framework built for scale.

Apr 10 - Apr 16, 2017

Articles / Miscellaneous

• A Tale of CSS and Sass Precision

Tools / Miscellaneous

• scss-lint (⭐3.6k) - Configurable tool for writing clean and consistent SCSS. (deprecated) (⭐3.6k)

Apr 03 - Apr 09, 2017

Libraries and Mixins / Miscellaneous

• Sass Deprecate (⭐271) - Sass mixin that helps managing code deprecation.

Feb 06 - Feb 12, 2017

Articles / Miscellaneous

• Aesthetic Sass 3: Typography and Vertical Rhythm

Nov 21 - Nov 27, 2016

Tools / Miscellaneous

• sass-rails (⭐853) - Ruby on Rails stylesheet engine for Sass.

Nov 14 - Nov 20, 2016

Tools / Miscellaneous

• sass-loader (⭐3.8k) - Sass loader for webpack.

Books / Miscellaneous

• 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

Videos / Miscellaneous

• Sass Tutorial

• Series of Sass tutorials showing the installing of, the basics, and using key features

• Sass or LESS? What should you use?

Nov 07 - Nov 13, 2016

Libraries and Mixins / Grid

• Neat - Lightweight semantic grid framework built with Sass.

• Toast - Flexible and lightweight grid framework from the creator of animate.css.

Libraries and Mixins / Media Queries

• Sass MQ (⭐2k) - Sass mixin that helps you compose media queries in an elegant way.

Libraries and Mixins / Typography

• Shevy - Typography made easy. A vertical rhythm library.

Libraries and Mixins / Animation

• Animate.scss (⭐651) - 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.

Libraries and Mixins / Miscellaneous

• Bourbon - Simple and lightweight mixin library for Sass.

• Buttons (⭐5.1k) - CSS button library built using Sass and Compass.

Tools / Miscellaneous

• libsass (⭐4.3k) - C/C++ implementation of a Sass compiler.

• node-sass (⭐8.2k) - Node.js bindings to libsass.

Oct 31 - Nov 06, 2016

Community / Miscellaneous

• Reddit

• Stack Overflow

• @SassCSS on Twitter

Oct 24 - Oct 30, 2016

Libraries and Mixins / Grid

• csswizardry-grids - Simple, fluid, nestable, flexible, Sass-based, responsive grid system.

• Gridlex - Flexbox grid system.

• Susy (⭐3.9k) - Responsive layout toolkit for Sass.

Libraries and Mixins / Color

• brand-colors - 1100+ collection of popular brand colors available in Sass, Less, Stylus and CSS.

• Open color (⭐4.8k) - Open color is a color scheme for UI design. Available in CSS, SCSS, LESS, Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch palette.

Libraries and Mixins / Typography

• Sassline - Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.

• Sassy-Gridlover (⭐224) - Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.

Oct 10 - Oct 16, 2016

Articles / Miscellaneous

• Hugo Giraudel Personal Awesome Sass List (⭐744) - Records of Hugo Giraudel's works on Sass.

Oct 03 - Oct 09, 2016

Libraries and Mixins / Miscellaneous

• retina.js (⭐4.5k) - JavaScript, SCSS, Sass, Less, and Stylus helpers for rendering high-resolution image variants.

Articles / Miscellaneous

• Styling React Components in Sass

• A Sass !default use case

Sep 26 - Oct 02, 2016

Articles / Miscellaneous

• 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

Sep 19 - Sep 25, 2016

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

• Bootstrap 4 (⭐160k) - Bootstrap version 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

• Foundation for Sites (⭐29k) - 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.

Libraries and Mixins / Miscellaneous

• Modular Scale (⭐2k) - Modular scale calculator built into your Sass.

Style Guides / Miscellaneous

• Hugo Giraudel's Sass Guidelines - Guidelines for writing sane, maintainable and scalable Sass.

• BigCommerce Sass Coding Guidelines (⭐281) - Guidelines in use at BigCommerce.

• Airbnb Sass and CSS Style Guide (⭐6.5k) - Sass and CSS style guide by Airbnb.

• Dropbox (S)CSS Style Guide (⭐841) - Dropbox’s (S)CSS authoring style guide.