awesome-sass
by Famolus
🎨 Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources.
AI summary
CSS framework collection
A curated collection of resources and frameworks for building responsive web applications using Sass and SCSS.
- stars
- 1.9K
- forks
- 135
- watching
- 58
- awesome lists
- 3
- entries
- 115
What's in the list
115 links in 16 sections, with live GitHub stats.activeno commit in 2y
Links
- contribution guide
Contributions welcome, please see
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
- avalanche
Framework for building the foundation for a package based CSS workflow
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
Bulma
Modern CSS framework based on Flexbox
Cirrus
A component and utility centric SCSS framework designed for rapid prototyping
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
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
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
Responsive layout toolkit for Sass
- Toast
Flexible and lightweight grid framework from the creator of
- Waffle Grid
Easy to use flexbox grid system
Libraries and Mixins / Media Queries
Breakpoint
Breakpoint makes writing media queries in Sass super simple
- include-media
Simple, elegant and maintainable media queries
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)
Sass MQ
Sass mixin that helps you compose media queries in an elegant way
Libraries and Mixins / Color
- 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
scss-blend-modes
Using standard color blending functions in 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
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
Sass mixin to make responsive typography easy
Libraries and Mixins / Animation
Animate.scss
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
Sass mixin for creating animated hamburger icon
- SpinThatShit
Set of SCSS mixins for single element loaders and spinners
Libraries and Mixins / Miscellaneous
Angled Edges
Sass mixin for creating angled edges on sections by dynamically encoding SVGs
- Bourbon
Simple and lightweight mixin library for Sass
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
Modular Scale
Modular scale calculator built into your Sass
normalize-scss
Sass/Compass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers
Pretty checkbox
SCSS/CSS library to beautify checkbox and radio buttons
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
Sass Deprecate
Sass mixin that helps managing code deprecation
Sass flexbox mixin
Set of mixins for those who want to mess around with flexbox using the native support of current browsers
Sassdash
The Sass implementation of lodash ( )
Scut
Collection of Sass utilities to ease and improve the implementations of common style-code patterns
Style Guides
- Hugo Giraudel's Sass Guidelines
Guidelines for writing sane, maintainable and scalable Sass
BigCommerce Sass Coding Guidelines
Guidelines in use at BigCommerce
Airbnb Sass and CSS Style Guide
Sass and CSS style guide by Airbnb
Dropbox (S)CSS Style Guide
Dropbox’s (S)CSS authoring style guide
Articles
Hugo Giraudel Personal Awesome Sass List
Records of Hugo Giraudel's works on Sass
Tools
dart-sass
Dart implementation of Sass
- diamond
Dependency management built for Sass, Less, and CSS
libsass-python
Binding of libsass for Python
libsass
C/C++ implementation of a Sass compiler
node-sass-magic-importer
Custom node-sass importer for selector specific imports, node importing, module importing, globbing support and importing files only once
node-sass
Node.js bindings to libsass
OctoLinker
Navigate through *.scss and *.sass files efficiently with the OctoLinker browser extension for GitHub
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
sass-loader
Sass loader for webpack
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
scss-lint
Configurable tool for writing clean and consistent SCSS
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
Books
Videos
Community
Nothing in this list matches your filter.
Featured in 3 awesome lists
Each link jumps to the spot where the list mentions awesome-sass.