antonini / awesome-scss

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

Awesome SCSS

A 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

• Getting Started
• Sass vs SCSS
• Frameworks
• Libraries and Mixins
  • Grid
• Style Guides
• Articles and Resources

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

• Bootstrap 4 - Bootstrap version 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
• Bootstrap 3 - Bootstrap version 3, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
• 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.
• Bourbon - A simple and lightweight mixin library for Sass.
• Scooter - An SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox.
• Sierra - A micro SCSS library to help you build websites, without all the arbitrary selectors.

Libraries and Mixins

• include-media - Simple, elegant and maintainable media queries.
• Family.scss - A 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.
• scss-blend-modes - Using standard color blending functions in Sass.
• Buttons - A CSS button library built using Sass and Compass.
• Sass MediaQueries - Media Queries mixins for Sass.
• Sassline - Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.
• Modular Scale - Modular scale calculator built into your Sass.
• SassDoc - Documentation system (like JSDoc for JavaScript) to build pretty and powerful docs in the blink of an eye.
• Scut - A collection of Sass utilities to ease and improve the implementations of common style-code patterns.
• Sass Burger - A Sass mixin for creating hamburger icons.
• SpinThatShit - A set of SCSS mixins for single element loaders and spinners.
• Animate.scss - A port of Dan Eden's Animate.css for SASS.
• brand-colors - 1100+ collection of popular brand colors available in Sass, Less, Stylus and CSS.
• Sass flexbox mixin - A set of mixins for those who want to mess around with flexbox using the native support of current browsers.
• Sass MediaQueries - A collection of useful media queries mixins for Sass (including iOS devices, TVs and more).
• Angled Edges - A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
• Hover - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Available in CSS, Sass, and LESS.
• retina.js - JavaScript, SCSS, Sass, Less, and Stylus helpers for rendering high-resolution image variants.
• Typi - A sass mixin to make responsive typography easy.
• 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 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.

###Grid

• csswizardry-grids - Simple, fluid, nestable, flexible, Sass-based, responsive grid system.
• Gridlex - Flexbox grid system.
• Neat - A 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.

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.
• edX Sass and CSS Style Guide - Sass and CSS style guide by edX.
• Dropbox (S)CSS Style Guide - Dropbox’s (S)CSS authoring style guide.

Articles and Resources

• Hugo Giraudel Personal Awesome Sass List - 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

License