awesome-sass

CSS framework collection

A curated collection of resources and frameworks for building responsive web applications using Sass and SCSS.

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

GitHub
2k stars
58 watching
135 forks
last commit: about 1 year ago
Linked from 3 awesome lists

csssassscss

Awesome Sass
contribution guide Contributions welcome, please see

Awesome Sass / 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

Awesome Sass / 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?

Awesome Sass / Frameworks
avalanche Framework for building the foundation for a package based CSS workflow
Bootstrap 4 170,886 7 days ago Bootstrap version 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web
Bootstrap-sass 12,581 3 months ago Official Sass port of Bootstrap 2 and 3
Bulma 49,371 10 days ago Modern CSS framework based on Flexbox
Cirrus 1,380 4 days ago A component and utility centric SCSS framework designed for rapid prototyping
Foundation for Sites 29,666 about 2 months ago 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

Awesome Sass / Libraries and Mixins / Grid
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
Jeet 2,985 about 7 years ago 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
Susy 3,868 7 months ago Responsive layout toolkit for Sass
Toast Flexible and lightweight grid framework from the creator of
Waffle Grid Easy to use flexbox grid system

Awesome Sass / Libraries and Mixins / Media Queries
Breakpoint 2,093 12 months ago Breakpoint makes writing media queries in Sass super simple
include-media Simple, elegant and maintainable media queries
mq-scss 125 over 5 years ago 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)
Sass MQ 1,987 22 days ago Sass mixin that helps you compose media queries in an elegant way

Awesome Sass / Libraries and Mixins / Color
brand-colors 1100+ collection of popular brand colors available in Sass, Less, Stylus and CSS
Open color 5,289 12 months ago 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 40 over 2 years ago Advanced color manipulation and contrast calculation in vanilla Sass
scss-blend-modes 817 about 7 years ago Using standard color blending functions in Sass

Awesome Sass / Libraries and Mixins / Typography
Sassline Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale
Sassy-Gridlover 221 over 5 years ago 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
Typi 857 almost 2 years ago Sass mixin to make responsive typography easy

Awesome Sass / Libraries and Mixins / Animation
Animate.scss 662 over 4 years ago Port of Dan Eden's 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
Sass Burger 653 about 3 years ago Sass mixin for creating animated hamburger icon
SpinThatShit Set of SCSS mixins for single element loaders and spinners

Awesome Sass / Libraries and Mixins / Miscellaneous
Angled Edges 963 almost 6 years ago Sass mixin for creating angled edges on sections by dynamically encoding SVGs
Bourbon Simple and lightweight mixin library for Sass
Buttono 89 about 2 months ago A flexible Sass mixin for creating BEM-style buttons
Buttons 5,033 over 4 years ago 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
Modular Scale 1,981 about 3 years ago Modular scale calculator built into your Sass
normalize-scss 1,434 about 1 year ago Sass/Compass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers
Pretty checkbox 1,809 about 4 years ago SCSS/CSS library to beautify checkbox and radio buttons
retina.js 4,423 over 4 years ago 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
Sass Deprecate 272 about 3 years ago Sass mixin that helps managing code deprecation
Sass flexbox mixin 1,121 almost 7 years ago Set of mixins for those who want to mess around with flexbox using the native support of current browsers
Sassdash 390 over 1 year ago The Sass implementation of lodash ( )
Scut 769 almost 3 years ago Collection of Sass utilities to ease and improve the implementations of common style-code patterns

Awesome Sass / Style Guides
Hugo Giraudel's Sass Guidelines Guidelines for writing sane, maintainable and scalable Sass
BigCommerce Sass Coding Guidelines 282 over 7 years ago Guidelines in use at BigCommerce
Airbnb Sass and CSS Style Guide 6,948 6 months ago Sass and CSS style guide by Airbnb
Dropbox (S)CSS Style Guide 1,172 about 5 years ago Dropbox’s (S)CSS authoring style guide

Awesome Sass / Articles
Hugo Giraudel Personal Awesome Sass List 753 over 3 years ago 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

Awesome Sass / Tools
dart-sass 3,970 5 days ago Dart implementation of Sass
diamond Dependency management built for Sass, Less, and CSS
libsass-python 563 23 days ago Binding of libsass for Python
libsass 4,337 10 months ago C/C++ implementation of a Sass compiler
node-sass-magic-importer 292 about 1 year ago Custom node-sass importer for selector specific imports, node importing, module importing, globbing support and importing files only once
node-sass 8,508 4 months ago Node.js bindings to libsass
OctoLinker 5,284 about 1 year ago Navigate through *.scss and *.sass files efficiently with the OctoLinker browser extension for GitHub
sass-extract 186 about 1 year ago 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
sass-loader 3,906 19 days ago Sass loader for webpack
sass-rails 859 about 4 years ago 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
scss-lint 3,656 10 months ago Configurable tool for writing clean and consistent SCSS
SharpScss 56 19 days ago 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

Awesome Sass / Books
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

Awesome Sass / Videos
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

Awesome Sass / Community
Reddit
Stack Overflow
@SassCSS on Twitter

Backlinks from these awesome lists:

More related projects: