Awesome Sass Overview

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

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

[ Daily / Weekly / Overview ]

Awesome Sass

Awesome Sass Awesome

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

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

Libraries and Mixins

Grid

Media Queries

Color

Typography

Animation

Miscellaneous

Style Guides

Articles

Tools

Books

Videos

Community

License

CC0