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.
2k stars
58 watching
135 forks
last commit: almost 3 years agoLinked 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 | 171,059 | almost 2 years ago | Bootstrap version 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web |
| Bootstrap-sass | 12,576 | about 2 years ago | Official Sass port of Bootstrap 2 and 3 |
| Bulma | 49,448 | almost 2 years ago | Modern CSS framework based on Flexbox |
| Cirrus | 1,381 | almost 2 years ago | A component and utility centric SCSS framework designed for rapid prototyping |
| Foundation for Sites | 29,671 | almost 2 years 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 9 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,867 | over 2 years 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,094 | almost 3 years ago | Breakpoint makes writing media queries in Sass super simple |
| include-media | Simple, elegant and maintainable media queries | ||
| mq-scss | 126 | over 7 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,985 | almost 2 years 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,315 | almost 3 years 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 | 41 | about 4 years ago | Advanced color manipulation and contrast calculation in vanilla Sass |
| scss-blend-modes | 818 | about 9 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 | 222 | over 7 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 | 856 | almost 4 years ago | Sass mixin to make responsive typography easy |
Awesome Sass / Libraries and Mixins / Animation | |||
| Animate.scss | 662 | over 6 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 | almost 5 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 | 962 | over 7 years ago | Sass mixin for creating angled edges on sections by dynamically encoding SVGs |
| Bourbon | Simple and lightweight mixin library for Sass | ||
| Buttono | 89 | almost 2 years ago | A flexible Sass mixin for creating BEM-style buttons |
| Buttons | 5,033 | over 6 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,982 | almost 5 years ago | Modular scale calculator built into your Sass |
| normalize-scss | 1,436 | almost 3 years ago | Sass/Compass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers |
| Pretty checkbox | 1,810 | almost 6 years ago | SCSS/CSS library to beautify checkbox and radio buttons |
| retina.js | 4,420 | over 6 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 | almost 5 years ago | Sass mixin that helps managing code deprecation |
| Sass flexbox mixin | 1,122 | over 8 years ago | Set of mixins for those who want to mess around with flexbox using the native support of current browsers |
| Sassdash | 391 | about 3 years ago | The Sass implementation of lodash ( ) |
| Scut | 769 | over 4 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 9 years ago | Guidelines in use at BigCommerce |
| Airbnb Sass and CSS Style Guide | 6,941 | over 2 years ago | Sass and CSS style guide by Airbnb |
| Dropbox (S)CSS Style Guide | 1,173 | almost 7 years ago | Dropbox’s (S)CSS authoring style guide |
Awesome Sass / Articles | |||
| Hugo Giraudel Personal Awesome Sass List | 753 | over 5 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,989 | almost 2 years ago | Dart implementation of Sass |
| diamond | Dependency management built for Sass, Less, and CSS | ||
| libsass-python | 564 | almost 2 years ago | Binding of libsass for Python |
| libsass | 4,339 | over 2 years ago | C/C++ implementation of a Sass compiler |
| node-sass-magic-importer | 293 | almost 3 years ago | Custom node-sass importer for selector specific imports, node importing, module importing, globbing support and importing files only once |
| node-sass | 8,508 | about 2 years ago | Node.js bindings to libsass |
| OctoLinker | 5,287 | almost 3 years ago | Navigate through *.scss and *.sass files efficiently with the OctoLinker browser extension for GitHub |
| sass-extract | 186 | almost 3 years 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,902 | almost 2 years ago | Sass loader for webpack |
| sass-rails | 859 | almost 6 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 | over 2 years ago | Configurable tool for writing clean and consistent SCSS |
| SharpScss | 57 | almost 2 years 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 | |||
| Stack Overflow | |||
| @SassCSS on Twitter | |||
sindresorhus/awesome
jnv/lists
0ex/more-awesome
ianrose/deventy
joseluisq/hyperapp-starter
ismamz/css
felipevolpatto/css-style-guide
npmweb/community-service
tderflinger/css-styleguide
sandromiguel/airbnb-css-style-guide
antoniofull/linee-guida-css
mat-u/css-style-guide
mazipan/css-style-guide