🎨 Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 022e8d7 Nov 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE.md add CC0 license Sep 22, 2016
README.md Add Kf Nov 9, 2018
awesome-sass-logo-github.png add awesome-sass logo file Nov 3, 2016
contributing.md change "package" to "Title" in Contribution Guidelines Oct 10, 2016

README.md

Awesome Sass

Awesome Sass Awesome

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

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

Sass vs SCSS

Frameworks

  • 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.
  • 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 - 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.
  • Kickoff - Kickoff is a lightweight front-end framework for creating scalable, performant and responsive sites.
  • Hocus-Pocus - Universal and lightweight stylesheet starter kit that focuses on base html elements and typography.
  • Materialize - Modern responsive front-end framework based on Material Design.
  • Bulma - Modern CSS framework based on Flexbox.
  • iotaCSS - Open source Sass-based OOCSS framework built for scale.
  • mini.css - Minimal, responsive, style-agnostic CSS framework.
  • avalanche - Framework for building the foundation for a package based CSS workflow.

Libraries and Mixins

Grid

  • csswizardry-grids - Simple, fluid, nestable, flexible, Sass-based, responsive grid system.
  • Gridlex - Flexbox grid system.
  • Neat - 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 - Flexible and lightweight grid framework from the creator of animate.css.
  • Jeet - Simple fractional grid system for Sass and Stylus.
  • Griddle - Extremely flexable CSS grid constructor.
  • Waffle Grid - Easy to use flexbox grid system.

Media Queries

  • include-media - Simple, elegant and maintainable media queries.
  • 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.
  • Breakpoint - Breakpoint makes writing media queries in Sass super simple.
  • mq-scss - An extreamly powerful but easy to use Sass media query mixin.

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.
  • sass-planifolia - Advanced color manipulation and contrast calculation in vanilla Sass.

Typography

  • Sassline - Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.
  • Typi - 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.
  • Shevy - Typography made easy. A vertical rhythm library.

Animation

  • Sass Burger - Sass mixin for creating animated hamburger icon.
  • SpinThatShit - Set of SCSS mixins for single element loaders and spinners.
  • 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.

Miscellaneous

  • Bourbon - Simple and lightweight mixin library for Sass.
  • 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.
  • normalize-scss - Sass/Compass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers.
  • Buttons - CSS button library built using Sass and Compass.
  • Modular Scale - Modular scale calculator built into your Sass.
  • Scut - Collection of Sass utilities to ease and improve the implementations of common style-code patterns.
  • Sass flexbox mixin - Set of mixins for those who want to mess around with flexbox using the native support of current browsers.
  • Angled Edges - 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 - Collection of Sass mixins and functions.
  • Sass Deprecate - Sass mixin that helps managing code deprecation.
  • Pretty checkbox - SCSS/CSS library to beautify checkbox and radio buttons.

Style Guides

Articles

Tools

  • libsass - C/C++ implementation of a Sass compiler.
  • node-sass - Node.js bindings to libsass.
  • dart-sass - Dart implementation of Sass.
  • SassDoc - Documentation system (like JSDoc for JavaScript) to build pretty and powerful docs in the blink of an eye.
  • sass-loader - Sass loader for webpack.
  • libsass-python - Binding of libsass for Python.
  • Scout-App - Process your Sass and SCSS files into CSS without needing any knowledge of the command line.
  • sass-rails - Ruby on Rails stylesheet engine for Sass.
  • scss-lint - Configurable tool for writing clean and consistent SCSS. (deprecated)
  • OctoLinker - Navigate through *.scss and *.sass files efficiently with the OctoLinker browser extension for GitHub.
  • stylelint - A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets. Supports CSS-like syntaxes, including SCSS.
  • diamond - Dependency management built for Sass, Less, and CSS.
  • node-sass-magic-importer - Custom node-sass importer for selector specific imports, node importing, module importing, globbing support and importing files only once.
  • SharpScss - P/Invoke .NET wrapper around libsass to convert SCSS to CSS supporting NET2.0/NET3.5/NET4.x+ and CoreCLR platform.
  • 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.

Books

Videos

Community

License

CC0