Awesome Lists

awesome-sass

by Famolus

awesome listpushed almost 3 years ago

🎨 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
View on GitHub

Embed the badge

Show how many awesome lists link to your project. The count updates automatically.

Awesome Lists badge
Markdown
[![Awesome Lists Badge](https://awesome.facts.dev/shield/Famolus/awesome-sass/links.svg)](https://awesome.facts.dev/awesome/Famolus/awesome-sass)
HTML
<a href="https://awesome.facts.dev/awesome/Famolus/awesome-sass"><img src="https://awesome.facts.dev/shield/Famolus/awesome-sass/links.svg" alt="Awesome Lists Badge" /></a>
Image URL
https://awesome.facts.dev/shield/Famolus/awesome-sass/links.svg

What's in the list

115 links in 16 sections, with live GitHub stats.activeno commit in 2y

Getting Started

Sass vs SCSS

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

  • Buttono

    A flexible Sass mixin for creating BEM-style buttons

  • 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

Articles

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

More related projects

Add a GitHub project

Missing a project or an awesome list? Paste its GitHub URL and we fetch it right away.