{"slug": "Famolus--awesome-sass", "title": "Sass", "description": "\ud83c\udfa8 Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources.", "github_url": "https://github.com/Famolus/awesome-sass", "stars": "1.8K", "tag": "Front-End Development", "entry_count": 125, "subcategory_count": 7, "subcategories": [{"name": "General", "parent": "", "entries": [{"name": "About", "url": "#about", "description": ""}, {"name": "Getting Started", "url": "#getting-started", "description": ""}, {"name": "Sass vs SCSS", "url": "#sass-vs-scss", "description": ""}, {"name": "Frameworks", "url": "#frameworks", "description": ""}, {"name": "Libraries and Mixins", "url": "#libraries-and-mixins", "description": ""}, {"name": "Style Guides", "url": "#style-guides", "description": ""}, {"name": "Articles", "url": "#articles", "description": ""}, {"name": "Tools", "url": "#tools", "description": ""}, {"name": "Books", "url": "#books", "description": ""}, {"name": "Videos", "url": "#videos", "description": ""}, {"name": "Community", "url": "#community", "description": ""}, {"name": "Official Sass and SCSS Guide", "url": "http://sass-lang.com/guide", "description": "Official Sass and SCSS guide."}, {"name": "Tutorialzine", "url": "http://tutorialzine.com/2016/01/learn-sass-in-15-minutes/", "description": "Learn SASS in 15 minutes tutorial."}, {"name": "Codecademy", "url": "https://www.codecademy.com/learn/learn-sass", "description": "Learn Sass with Codecademy."}, {"name": "Lynda", "url": "https://www.lynda.com/SASS-training-tutorials/1435-0.html", "description": "Learn how to use Sass, from beginner basics to advanced techniques, with online video tutorials taught by industry experts."}, {"name": "Official Sass and SCSS Reference", "url": "http://sass-lang.com/documentation/file.SASS_REFERENCE.html", "description": "Official Sass and SCSS Documentation Reference."}, {"name": "SitePoint Sass and SCSS Reference", "url": "https://www.sitepoint.com/sass-reference/", "description": "SitePoint Sass and SCSS reference."}, {"name": "SitePoint", "url": "https://www.sitepoint.com/whats-difference-sass-scss/", "description": "What\u2019s the difference between Sass and SCSS?"}, {"name": "The Sass Way", "url": "http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better", "description": "Which syntax is better?"}, {"name": "Stack Overflow", "url": "http://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass", "description": "What's the difference between SCSS and Sass?"}, {"name": "avalanche", "url": "https://avalanche.oberlehner.net", "description": "Framework for building the foundation for a package based CSS workflow."}, {"name": "Bootstrap 4", "url": "https://github.com/twbs/bootstrap", "description": "Bootstrap version 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.", "stars": "160k"}, {"name": "Bootstrap-sass", "url": "https://github.com/twbs/bootstrap-sass", "description": "Official Sass port of Bootstrap 2 and 3.", "stars": "13k"}, {"name": "Bulma", "url": "https://github.com/jgthms/bulma", "description": "Modern CSS framework based on Flexbox.", "stars": "46k"}, {"name": "Cirrus", "url": "https://github.com/Spiderpig86/Cirrus", "description": "A component and utility centric SCSS framework designed for rapid prototyping.", "stars": "1.1k"}, {"name": "Foundation for Sites", "url": "https://github.com/zurb/foundation-sites", "description": "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.", "stars": "29k"}, {"name": "Hocus-Pocus", "url": "https://bkzl.github.io/hocus-pocus/", "description": "Universal and lightweight stylesheet starter kit that focuses on base html elements and typography."}, {"name": "iotaCSS", "url": "https://www.iotacss.com", "description": "Open source Sass-based OOCSS framework built for scale."}, {"name": "Kickoff", "url": "http://trykickoff.com", "description": "Kickoff is a lightweight front-end framework for creating scalable, performant and responsive sites."}, {"name": "Materialize", "url": "http://materializecss.com", "description": "Modern responsive front-end framework based on Material Design."}, {"name": "mini.css", "url": "http://minicss.org/", "description": "Minimal, responsive, style-agnostic CSS framework."}, {"name": "Scooter", "url": "http://dropbox.github.io/scooter/", "description": "SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox."}, {"name": "Sierra", "url": "http://sierra-library.github.io/", "description": "Micro SCSS library to help you build websites, without all the arbitrary selectors."}]}, {"name": "Grid", "parent": "Libraries and Mixins", "entries": [{"name": "Avalanche", "url": "http://colourgarden.net/avalanche", "description": "Lightweight, responsive, Sass-based, BEM-syntax grid system."}, {"name": "csswizardry-grids", "url": "http://csswizardry.com/csswizardry-grids/", "description": "Simple, fluid, nestable, flexible, Sass-based, responsive grid system."}, {"name": "Griddle", "url": "http://necolas.github.io/griddle/", "description": "Extremely flexable CSS grid constructor."}, {"name": "Gridlex", "url": "http://gridlex.devlint.fr/", "description": "Flexbox grid system."}, {"name": "Jeet", "url": "https://github.com/mojotech/jeet", "description": "Simple fractional grid system for Sass and Stylus.", "stars": "3k"}, {"name": "Neat", "url": "http://neat.bourbon.io/", "description": "Lightweight semantic grid framework built with Sass."}, {"name": "Sass Flexible Grid System", "url": "https://dnomak.com/flexiblegs/install/sass/", "description": "Sass flexible grid system."}, {"name": "SCSS Flexible Grid System", "url": "https://dnomak.com/flexiblegs/install/scss/", "description": "SCSS flexible grid system."}, {"name": "Susy", "url": "https://github.com/oddbird/susy", "description": "Responsive layout toolkit for Sass.", "stars": "3.9k"}, {"name": "Toast", "url": "http://daneden.github.io/Toast/", "description": "Flexible and lightweight grid framework from the creator of [animate.css](https://daneden.github.io/animate.css/)."}, {"name": "Waffle Grid", "url": "https://lucasgruwez.github.io/waffle-grid/", "description": "Easy to use flexbox grid system."}]}, {"name": "Media Queries", "parent": "Libraries and Mixins", "entries": [{"name": "Breakpoint", "url": "https://github.com/at-import/breakpoint", "description": "Breakpoint makes writing media queries in Sass super simple.", "stars": "2.1k"}, {"name": "include-media", "url": "https://eduardoboucas.github.io/include-media/", "description": "Simple, elegant and maintainable media queries."}, {"name": "mq-scss", "url": "https://github.com/Dan503/mq-scss", "description": "An extreamly powerful but easy to use Sass media query mixin.", "stars": "126"}, {"name": "Sass MediaQueries", "url": "http://rafalbromirski.github.io/sass-mediaqueries/", "description": "Collection of useful media queries mixins for Sass (including iOS devices, TVs and more)."}, {"name": "Sass MQ", "url": "https://github.com/sass-mq/sass-mq", "description": "Sass mixin that helps you compose media queries in an elegant way.", "stars": "2k"}]}, {"name": "Color", "parent": "Libraries and Mixins", "entries": [{"name": "brand-colors", "url": "http://brand-colors.com/", "description": "1100+ collection of popular brand colors available in Sass, Less, Stylus and CSS."}, {"name": "Open color", "url": "https://github.com/yeun/open-color", "description": "Open color is a color scheme for UI design. Available in CSS, SCSS, LESS, Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch palette.", "stars": "4.8k"}, {"name": "sass-planifolia", "url": "https://github.com/xi/sass-planifolia", "description": "Advanced color manipulation and contrast calculation in vanilla Sass.", "stars": "39"}, {"name": "scss-blend-modes", "url": "https://github.com/heygrady/scss-blend-modes", "description": "Using standard color blending functions in Sass.", "stars": "821"}]}, {"name": "Typography", "parent": "Libraries and Mixins", "entries": [{"name": "Sassline", "url": "https://sassline.com/", "description": "Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale."}, {"name": "Sassy-Gridlover", "url": "https://github.com/hiulit/Sassy-Gridlover", "description": "Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.", "stars": "224"}, {"name": "Shevy", "url": "http://kyleshevlin.github.io/shevy/", "description": "Typography made easy. A vertical rhythm library."}, {"name": "Typi", "url": "https://github.com/zellwk/typi", "description": "Sass mixin to make responsive typography easy.", "stars": "866"}]}, {"name": "Animation", "parent": "Libraries and Mixins", "entries": [{"name": "Animate.scss", "url": "https://github.com/geoffgraham/animate.scss", "description": "Port of Dan Eden's [Animate.css](https://daneden.github.io/animate.css/) for SASS.", "stars": "651"}, {"name": "Hover", "url": "http://ianlunn.github.io/Hover/", "description": "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."}, {"name": "Kf", "url": "https://kf-sass.com", "description": "Sass mixin library for creating keyframe-based animations from maps."}, {"name": "Sass Burger", "url": "https://github.com/jorenvanhee/sass-burger", "description": "Sass mixin for creating animated hamburger icon.", "stars": "666"}, {"name": "SpinThatShit", "url": "https://matejkustec.github.io/SpinThatShit/", "description": "Set of SCSS mixins for single element loaders and spinners."}]}, {"name": "Miscellaneous", "parent": "Libraries and Mixins", "entries": [{"name": "Angled Edges", "url": "https://github.com/josephfusco/angled-edges", "description": "Sass mixin for creating angled edges on sections by dynamically encoding SVGs.", "stars": "971"}, {"name": "Bourbon", "url": "http://bourbon.io/", "description": "Simple and lightweight mixin library for Sass."}, {"name": "Buttono", "url": "https://github.com/hsnaydd/buttono", "description": "A flexible Sass mixin for creating BEM-style buttons.", "stars": "83"}, {"name": "Buttons", "url": "https://github.com/alexwolfe/Buttons", "description": "CSS button library built using Sass and Compass.", "stars": "5.1k"}, {"name": "csstyle", "url": "https://csstyle.io", "description": "A SCSS library to help you build modular CSS that generates your selectors for you and deals with specificity automatically."}, {"name": "Family.scss", "url": "http://lukyvj.github.io/family.scss/", "description": "Set of 26 smart Sass mixins which will help you to manage the style of :nth-child\u2019ified elements, in an easy and classy way."}, {"name": "Gerillass", "url": "https://gerillass.com/", "description": "A Sass mixin library to help you create modern web sites."}, {"name": "Juice", "url": "http://kylebrumm.com/juice/", "description": "Collection of Sass mixins and functions."}, {"name": "Modular Scale", "url": "https://github.com/modularscale/modularscale-sass", "description": "Modular scale calculator built into your Sass.", "stars": "2k"}, {"name": "normalize-scss", "url": "https://github.com/JohnAlbin/normalize-scss", "description": "Sass/Compass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers.", "stars": "1.4k"}, {"name": "Pretty checkbox", "url": "https://github.com/lokesh-coder/pretty-checkbox", "description": "SCSS/CSS library to beautify checkbox and radio buttons.", "stars": "1.8k"}, {"name": "retina.js", "url": "https://github.com/imulus/retinajs", "description": "JavaScript, SCSS, Sass, Less, and Stylus helpers for rendering high-resolution image variants.", "stars": "4.5k"}, {"name": "Sass Accoutrement", "url": "http://oddbird.net/open-source/accoutrement/", "description": "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."}, {"name": "Sass Deprecate", "url": "https://github.com/salesforce-ux/sass-deprecate", "description": "Sass mixin that helps managing code deprecation.", "stars": "271"}, {"name": "Sass flexbox mixin", "url": "https://github.com/mastastealth/sass-flex-mixin", "description": "Set of mixins for those who want to mess around with flexbox using the native support of current browsers.", "stars": "1.1k"}, {"name": "Sassdash", "url": "https://github.com/davidkpiano/sassdash", "description": "The Sass implementation of lodash ([API documentation](http://davidkpiano.github.io/sassdash)).", "stars": "384"}, {"name": "Scut", "url": "https://github.com/davidtheclark/scut", "description": "Collection of Sass utilities to ease and improve the implementations of common style-code patterns.", "stars": "769"}, {"name": "Hugo Giraudel's Sass Guidelines", "url": "https://sass-guidelin.es/", "description": "Guidelines for writing sane, maintainable and scalable Sass."}, {"name": "BigCommerce Sass Coding Guidelines", "url": "https://github.com/bigcommerce/sass-style-guide", "description": "Guidelines in use at BigCommerce.", "stars": "281"}, {"name": "Airbnb Sass and CSS Style Guide", "url": "https://github.com/airbnb/css", "description": "Sass and CSS style guide by Airbnb.", "stars": "6.5k"}, {"name": "Dropbox (S)CSS Style Guide", "url": "https://github.com/dropbox/css-style-guide", "description": "Dropbox\u2019s (S)CSS authoring style guide.", "stars": "841"}, {"name": "Hugo Giraudel Personal Awesome Sass List", "url": "https://github.com/HugoGiraudel/awesome-sass", "description": "Records of Hugo Giraudel's works on Sass.", "stars": "744"}, {"name": "Cubic B\u00e9zier Representation in Sass", "url": "http://thesassway.com/advanced/cubic-bezier-representation-in-sass", "description": ""}, {"name": "Faster Sass builds with Webpack", "url": "http://eng.localytics.com/faster-sass-builds-with-webpack/", "description": ""}, {"name": "Transitioning to SCSS at Scale", "url": "https://codeascraft.com/2015/02/02/transitioning-to-scss-at-scale/", "description": ""}, {"name": "Sass Maps to UI Components", "url": "https://blog.prototypr.io/sass-maps-to-ui-components-f14e1f34412e#.9zt0s0rxt", "description": ""}, {"name": "Inverse trigonometric functions with Sass", "url": "http://thesassway.com/advanced/inverse-trigonometric-functions-with-sass", "description": ""}, {"name": "Stop Arguing So Much with Your Mixins", "url": "http://sassbreak.com/stop-arguing-with-your-mixins", "description": ""}, {"name": "Styling React Components in Sass", "url": "http://hugogiraudel.com/2015/06/18/styling-react-components-in-sass/", "description": ""}, {"name": "A Sass !default use case", "url": "https://robots.thoughtbot.com/sass-default", "description": ""}, {"name": "Aesthetic Sass 3: Typography and Vertical Rhythm", "url": "https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-rhythm", "description": ""}, {"name": "A Tale of CSS and Sass Precision", "url": "https://www.sitepoint.com/a-tale-of-css-and-sass-precision/", "description": ""}, {"name": "Build a Style Guide Straight from Sass", "url": "https://css-tricks.com/build-style-guide-straight-sass/", "description": ""}, {"name": "Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do", "url": "https://gist.github.com/jareware/4738651", "description": ""}, {"name": "The 80-20 Approach to Sustainable SCSS", "url": "https://zendev.com/2018/05/30/the-80-20-approach-to-sustainable-scss.html", "description": ""}, {"name": "Advanced Use of Sass Maps", "url": "https://itnext.io/advanced-use-of-sass-maps-bd5a47ca0d1a", "description": ""}, {"name": "dart-sass", "url": "https://github.com/sass/dart-sass", "description": "Dart implementation of Sass.", "stars": "3.3k"}, {"name": "diamond", "url": "https://diamond.js.org", "description": "Dependency management built for Sass, Less, and CSS."}, {"name": "libsass-python", "url": "https://github.com/dahlia/libsass-python", "description": "Binding of libsass for Python.", "stars": "522"}, {"name": "libsass", "url": "https://github.com/sass/libsass", "description": "C/C++ implementation of a Sass compiler.", "stars": "4.3k"}, {"name": "node-sass-magic-importer", "url": "https://github.com/maoberlehner/node-sass-magic-importer", "description": "Custom node-sass importer for selector specific imports, node importing, module importing, globbing support and importing files only once.", "stars": "293"}, {"name": "node-sass", "url": "https://github.com/sass/node-sass", "description": "Node.js bindings to libsass.", "stars": "8.2k"}, {"name": "OctoLinker", "url": "https://github.com/OctoLinker/browser-extension", "description": "Navigate through \\*.scss and \\*.sass files efficiently with the OctoLinker browser extension for GitHub.", "stars": "5.1k"}, {"name": "sass-extract", "url": "https://github.com/jgranstrom/sass-extract", "description": "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.", "stars": "187"}, {"name": "sass-loader", "url": "https://github.com/jtangelder/sass-loader", "description": "Sass loader for webpack.", "stars": "3.8k"}, {"name": "sass-rails", "url": "https://github.com/rails/sass-rails", "description": "Ruby on Rails stylesheet engine for Sass.", "stars": "853"}, {"name": "SassDoc", "url": "http://sassdoc.com/", "description": "Documentation system (like JSDoc for JavaScript) to build pretty and powerful docs in the blink of an eye."}, {"name": "Scout-App", "url": "http://scout-app.io/", "description": "Process your Sass and SCSS files into CSS without needing any knowledge of the command line."}, {"name": "scss-lint", "url": "https://github.com/brigade/scss-lint", "description": "Configurable tool for writing clean and consistent SCSS. [(deprecated) (\u2b503.6k)](https://github.com/brigade/scss-lint#notice-consider-other-tools-before-adopting-scss-lint)", "stars": "3.6k"}, {"name": "SharpScss", "url": "https://github.com/xoofx/SharpScss", "description": "P/Invoke .NET wrapper around libsass to convert SCSS to CSS supporting NET2.0/NET3.5/NET4.x+ and CoreCLR platform.", "stars": "53"}, {"name": "stylelint", "url": "https://stylelint.io/", "description": "A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets. Supports CSS-like syntaxes, including SCSS."}, {"name": "Sass in the Real World: Book I of IV", "url": "https://anotheruiguy.gitbooks.io/sassintherealworld_book-i/content/", "description": ""}, {"name": "Sass in the Real World: Book II of IV", "url": "https://anotheruiguy.gitbooks.io/sass-in-the-real-world-book-2-of-4/content/", "description": ""}, {"name": "Jump Start Sass: Get Up to Speed With Sass in a Weekend", "url": "https://www.amazon.com/Jump-Start-Sass-Speed-Weekend/dp/0994182678", "description": ""}, {"name": "Sass and Compass for Designers", "url": "https://www.amazon.com/Sass-Compass-Designers-Ben-Frain/dp/1849694540", "description": ""}, {"name": "Sass Tutorial", "url": "https://www.youtube.com/watch?v=wz3kElLbEHE", "description": ""}, {"name": "Series of Sass tutorials showing the installing of, the basics, and using key features", "url": "https://www.youtube.com/playlist?list=PL2CB1F80266E986EA", "description": ""}, {"name": "Sass or LESS? What should you use?", "url": "https://www.youtube.com/watch?v=lJclQekSfSM", "description": ""}, {"name": "Learn Sass in this Free Crash Course - Give your CSS Superpowers!", "url": "https://www.youtube.com/watch?v=roywYSEPSvc", "description": ""}, {"name": "The Net Ninja Sass playlist", "url": "https://www.youtube.com/watch?v=St5B7hnMLjg\\&list=PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA", "description": ""}, {"name": "Reddit", "url": "https://www.reddit.com/r/Sass/", "description": ""}, {"name": "Stack Overflow", "url": "http://stackoverflow.com/questions/tagged/sass", "description": ""}, {"name": "@SassCSS on Twitter", "url": "https://twitter.com/SassCSS", "description": ""}]}], "name": ""}