rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update lists

Browse Source
This commit is contained in:
Jonas Zeunert
2025-07-18 22:22:32 +02:00
parent 55bed3b4a1
commit 5916c5c074
3078 changed files with 331679 additions and 357255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

378
readmes/sass.md
View File

@@ -1,208 +1,186 @@
# Awesome Sass
![Awesome Sass](https://raw.githubusercontent.com/Famolus/awesome-sass/master/awesome-sass-logo-github.png)
**Disclaimer!** Fair warning: this list is a way for me to keep track of all my work around Sass. For this reason, I do not accept pull-requests. That being said I am willing to have another version of this list with everbody's work, even if it means renaming this repository. :)
# Awesome Sass [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
> Curated list of awesome [Sass](http://sass-lang.com/) and [SCSS](http://sass-lang.com/) frameworks, libraries, style guides, articles, and resources.
- Use <kbd>command</kbd> + <kbd>F</kbd> or <kbd>ctrl</kbd> + <kbd>F</kbd> to search for a keyword.
- Contributions welcome, please see [contribution guide](contributing.md).
## Contents
- [About](#about)
- [Getting Started](#getting-started)
- [Sass vs SCSS](#sass-vs-scss)
- [Frameworks](#frameworks)
- [Libraries and Mixins](#libraries-and-mixins)
- [Grid](#grid)
- [Media Queries](#media-queries)
- [Color](#color)
- [Typography](#typography)
- [Animation](#animation)
- [Miscellaneous](#miscellaneous)
- [Style Guides](#style-guides)
- [Articles](#articles)
- [Tools](#tools)
- [Books](#books)
- [Videos](#videos)
- [Community](#community)
## About
[Sass](http://sass-lang.com/) is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.
Sass has two syntaxes. The new main syntax (as of Sass 3) is known as "SCSS" (for "Sassy CSS"), and is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. SCSS files use the extension `.scss`.
The second, older syntax is known as the indented syntax (or just "Sass"). Inspired by Haml's terseness, it's intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension `.sass`.
## Getting Started
- [Official Sass and SCSS Guide](http://sass-lang.com/guide) - Official Sass and SCSS guide.
- [Tutorialzine](http://tutorialzine.com/2016/01/learn-sass-in-15-minutes/) - Learn SASS in 15 minutes tutorial.
- [Codecademy](https://www.codecademy.com/learn/learn-sass) - Learn Sass with Codecademy.
- [Lynda](https://www.lynda.com/SASS-training-tutorials/1435-0.html) - Learn how to use Sass, from beginner basics to advanced techniques, with online video tutorials taught by industry experts.
- [Official Sass and SCSS Reference](http://sass-lang.com/documentation/file.SASS_REFERENCE.html) - Official Sass and SCSS Documentation Reference.
- [SitePoint Sass and SCSS Reference](https://www.sitepoint.com/sass-reference/) - SitePoint Sass and SCSS reference.
## Sass vs SCSS
- [SitePoint](https://www.sitepoint.com/whats-difference-sass-scss/) - What’s the difference between Sass and SCSS?
- [The Sass Way](http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better) - Which syntax is better?
- [Stack Overflow](http://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass) - What's the difference between SCSS and Sass?
## Frameworks
- [avalanche](https://avalanche.oberlehner.net) - Framework for building the foundation for a package based CSS workflow.
- [Bootstrap 4](https://github.com/twbs/bootstrap) - Bootstrap version 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
- [Bootstrap-sass](https://github.com/twbs/bootstrap-sass) - Official Sass port of Bootstrap 2 and 3.
- [Bulma](https://github.com/jgthms/bulma) - Modern CSS framework based on Flexbox.
- [Cirrus](https://github.com/Spiderpig86/Cirrus) - A component and utility centric SCSS framework designed for rapid prototyping.
- [Foundation for Sites](https://github.com/zurb/foundation-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](https://bkzl.github.io/hocus-pocus/) - Universal and lightweight stylesheet starter kit that focuses on base html elements and typography.
- [iotaCSS](https://www.iotacss.com) - Open source Sass-based OOCSS framework built for scale.
- [Kickoff](http://trykickoff.com) - Kickoff is a lightweight front-end framework for creating scalable, performant and responsive sites.
- [Materialize](http://materializecss.com) - Modern responsive front-end framework based on Material Design.
- [mini.css](http://minicss.org/) - Minimal, responsive, style-agnostic CSS framework.
- [Scooter](http://dropbox.github.io/scooter/) - SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox.
- [Sierra](http://sierra-library.github.io/) - Micro SCSS library to help you build websites, without all the arbitrary selectors.
## Libraries and Mixins
### Grid
- [Avalanche](http://colourgarden.net/avalanche) - Lightweight, responsive, Sass-based, BEM-syntax grid system.
- [csswizardry-grids](http://csswizardry.com/csswizardry-grids/) - Simple, fluid, nestable, flexible, Sass-based, responsive grid system.
- [Griddle](http://necolas.github.io/griddle/) - Extremely flexable CSS grid constructor.
- [Gridlex](http://gridlex.devlint.fr/) - Flexbox grid system.
- [Jeet](https://github.com/mojotech/jeet) - Simple fractional grid system for Sass and Stylus.
- [Neat](http://neat.bourbon.io/) - Lightweight semantic grid framework built with Sass.
- [Sass Flexible Grid System](https://dnomak.com/flexiblegs/install/sass/) - Sass flexible grid system.
- [SCSS Flexible Grid System](https://dnomak.com/flexiblegs/install/scss/) - SCSS flexible grid system.
- [Susy](https://github.com/oddbird/susy) - Responsive layout toolkit for Sass.
- [Toast](http://daneden.github.io/Toast/) - Flexible and lightweight grid framework from the creator of [animate.css](https://daneden.github.io/animate.css/).
- [Waffle Grid](https://lucasgruwez.github.io/waffle-grid/) - Easy to use flexbox grid system.
### Media Queries
- [Breakpoint](https://github.com/at-import/breakpoint) - Breakpoint makes writing media queries in Sass super simple.
- [include-media](https://eduardoboucas.github.io/include-media/) - Simple, elegant and maintainable media queries.
- [mq-scss](https://github.com/Dan503/mq-scss) - An extreamly powerful but easy to use Sass media query mixin.
- [Sass MediaQueries](http://rafalbromirski.github.io/sass-mediaqueries/) - Collection of useful media queries mixins for Sass (including iOS devices, TVs and more).
- [Sass MQ](https://github.com/sass-mq/sass-mq) - Sass mixin that helps you compose media queries in an elegant way.
### Color
- [brand-colors](http://brand-colors.com/) - 1100+ collection of popular brand colors available in Sass, Less, Stylus and CSS.
- [Open color](https://github.com/yeun/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](https://github.com/xi/sass-planifolia) - Advanced color manipulation and contrast calculation in vanilla Sass.
- [scss-blend-modes](https://github.com/heygrady/scss-blend-modes) - Using standard color blending functions in Sass.
### Typography
- [Sassline](https://sassline.com/) - Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.
- [Sassy-Gridlover](https://github.com/hiulit/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](http://kyleshevlin.github.io/shevy/) - Typography made easy. A vertical rhythm library.
- [Typi](https://github.com/zellwk/typi) - Sass mixin to make responsive typography easy.
### Animation
- [Animate.scss](https://github.com/geoffgraham/animate.scss) - Port of Dan Eden's [Animate.css](https://daneden.github.io/animate.css/) for SASS.
- [Hover](http://ianlunn.github.io/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](https://kf-sass.com) - Sass mixin library for creating keyframe-based animations from maps.
- [Sass Burger](https://github.com/jorenvanhee/sass-burger) - Sass mixin for creating animated hamburger icon.
- [SpinThatShit](https://matejkustec.github.io/SpinThatShit/) - Set of SCSS mixins for single element loaders and spinners.
### Miscellaneous
- [Angled Edges](https://github.com/josephfusco/angled-edges) - Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
- [Bourbon](http://bourbon.io/) - Simple and lightweight mixin library for Sass.
- [Buttono](https://github.com/hsnaydd/buttono) - A flexible Sass mixin for creating BEM-style buttons.
- [Buttons](https://github.com/alexwolfe/Buttons) - CSS button library built using Sass and Compass.
- [csstyle](https://csstyle.io) - A SCSS library to help you build modular CSS that generates your selectors for you and deals with specificity automatically.
- [Family.scss](http://lukyvj.github.io/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](https://gerillass.com/) - A Sass mixin library to help you create modern web sites.
- [Juice](http://kylebrumm.com/juice/) - Collection of Sass mixins and functions.
- [Modular Scale](https://github.com/modularscale/modularscale-sass) - Modular scale calculator built into your Sass.
- [normalize-scss](https://github.com/JohnAlbin/normalize-scss) - Sass/Compass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers.
- [Pretty checkbox](https://github.com/lokesh-coder/pretty-checkbox) - SCSS/CSS library to beautify checkbox and radio buttons.
- [retina.js](https://github.com/imulus/retinajs) - JavaScript, SCSS, Sass, Less, and Stylus helpers for rendering high-resolution image variants.
- [Sass Accoutrement](http://oddbird.net/open-source/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](https://github.com/salesforce-ux/sass-deprecate) - Sass mixin that helps managing code deprecation.
- [Sass flexbox mixin](https://github.com/mastastealth/sass-flex-mixin) - Set of mixins for those who want to mess around with flexbox using the native support of current browsers.
- [Sassdash](https://github.com/davidkpiano/sassdash) - The Sass implementation of lodash ([API documentation](http://davidkpiano.github.io/sassdash)).
- [Scut](https://github.com/davidtheclark/scut) - Collection of Sass utilities to ease and improve the implementations of common style-code patterns.
## Style Guides
- [Hugo Giraudel's Sass Guidelines](https://sass-guidelin.es/) - Guidelines for writing sane, maintainable and scalable Sass.
- [BigCommerce Sass Coding Guidelines](https://github.com/bigcommerce/sass-style-guide) - Guidelines in use at BigCommerce.
- [Airbnb Sass and CSS Style Guide](https://github.com/airbnb/css) - Sass and CSS style guide by Airbnb.
- [Dropbox (S)CSS Style Guide](https://github.com/dropbox/css-style-guide) - Dropbox’s (S)CSS authoring style guide.
## Articles
- [Hugo Giraudel Personal Awesome Sass List](https://github.com/HugoGiraudel/awesome-sass) - Records of Hugo Giraudel's works on Sass.
- [Cubic Bézier Representation in Sass](http://thesassway.com/advanced/cubic-bezier-representation-in-sass)
- [Faster Sass builds with Webpack](http://eng.localytics.com/faster-sass-builds-with-webpack/)
- [Transitioning to SCSS at Scale](https://codeascraft.com/2015/02/02/transitioning-to-scss-at-scale/)
- [Sass Maps to UI Components](https://blog.prototypr.io/sass-maps-to-ui-components-f14e1f34412e#.9zt0s0rxt)
- [Inverse trigonometric functions with Sass](http://thesassway.com/advanced/inverse-trigonometric-functions-with-sass)
- [Stop Arguing So Much with Your Mixins](http://sassbreak.com/stop-arguing-with-your-mixins)
- [Styling React Components in Sass](http://hugogiraudel.com/2015/06/18/styling-react-components-in-sass/)
- [A Sass !default use case](https://robots.thoughtbot.com/sass-default)
- [Aesthetic Sass 3: Typography and Vertical Rhythm](https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-rhythm)
- [A Tale of CSS and Sass Precision](https://www.sitepoint.com/a-tale-of-css-and-sass-precision/)
- [Build a Style Guide Straight from Sass](https://css-tricks.com/build-style-guide-straight-sass/)
- [Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do](https://gist.github.com/jareware/4738651)
- [The 80-20 Approach to Sustainable SCSS](https://zendev.com/2018/05/30/the-80-20-approach-to-sustainable-scss.html)
- [Advanced Use of Sass Maps](https://itnext.io/advanced-use-of-sass-maps-bd5a47ca0d1a)
## Tools
- [dart-sass](https://github.com/sass/dart-sass) - Dart implementation of Sass.
- [diamond](https://diamond.js.org) - Dependency management built for Sass, Less, and CSS.
- [libsass-python](https://github.com/dahlia/libsass-python) - Binding of libsass for Python.
- [libsass](https://github.com/sass/libsass) - C/C++ implementation of a Sass compiler.
- [node-sass-magic-importer](https://github.com/maoberlehner/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](https://github.com/sass/node-sass) - Node.js bindings to libsass.
- [OctoLinker](https://github.com/OctoLinker/browser-extension) - Navigate through *.scss and *.sass files efficiently with the OctoLinker browser extension for GitHub.
- [sass-extract](https://github.com/jgranstrom/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](https://github.com/jtangelder/sass-loader) - Sass loader for webpack.
- [sass-rails](https://github.com/rails/sass-rails) - Ruby on Rails stylesheet engine for Sass.
- [SassDoc](http://sassdoc.com/) - Documentation system (like JSDoc for JavaScript) to build pretty and powerful docs in the blink of an eye.
- [Scout-App](http://scout-app.io/) - Process your Sass and SCSS files into CSS without needing any knowledge of the command line.
- [scss-lint](https://github.com/brigade/scss-lint) - Configurable tool for writing clean and consistent SCSS. [(deprecated)](https://github.com/brigade/scss-lint#notice-consider-other-tools-before-adopting-scss-lint)
- [SharpScss](https://github.com/xoofx/SharpScss) - P/Invoke .NET wrapper around libsass to convert SCSS to CSS supporting NET2.0/NET3.5/NET4.x+ and CoreCLR platform.
- [stylelint](https://stylelint.io/) - A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets. Supports CSS-like syntaxes, including SCSS.
## Books
- [Sass in the Real World: Book I of IV](https://anotheruiguy.gitbooks.io/sassintherealworld_book-i/content/)
- [Sass in the Real World: Book II of IV](https://anotheruiguy.gitbooks.io/sass-in-the-real-world-book-2-of-4/content/)
- [Jump Start Sass: Get Up to Speed With Sass in a Weekend](https://www.amazon.com/Jump-Start-Sass-Speed-Weekend/dp/0994182678)
- [Sass and Compass for Designers](https://www.amazon.com/Sass-Compass-Designers-Ben-Frain/dp/1849694540)
* [Jump Start Sass](http://howsass.works): a beginner’s guide to get started with Sass
## Videos
- [Sass Tutorial](https://www.youtube.com/watch?v=wz3kElLbEHE)
- [Series of Sass tutorials showing the installing of, the basics, and using key features](https://www.youtube.com/playlist?list=PL2CB1F80266E986EA)
- [Sass or LESS? What should you use?](https://www.youtube.com/watch?v=lJclQekSfSM)
- [Learn Sass in this Free Crash Course - Give your CSS Superpowers!](https://www.youtube.com/watch?v=roywYSEPSvc)
- [The Net Ninja Sass playlist](https://www.youtube.com/watch?v=St5B7hnMLjg&list=PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA)
## Projects
* [Sass Reference](http://www.sitepoint.com/sass-reference/): SitePoint Sass Reference
* [SassDoc](https://github.com/SassDoc/sassdoc): release the docs!
* [Sass Guidelines](https://sass-guidelin.es): an opinionated styleguide for writing sane, maintainable and scalable Sass
* [Sass-Compatibility](https://github.com/sass-compatibility/sass-compatibility): Sass Compatibility tables
* [Sass-Boilerplate](https://github.com/KittyGiraudel/sass-boilerplate): a Sass boilerplate sticking to Sass Guidelines
* [Sass-semver](https://github.com/KittyGiraudel/sass-semver): a SemVer parser in Sass
* [SassyTester](https://github.com/KittyGiraudel/SassyTester): a minimalister function tester in Sass
* [SassyBitwise](https://github.com/KittyGiraudel/SassyBitwise): bitwise operators implemented in Sass
* [SassyCast](https://github.com/KittyGiraudel/SassyCast): a small lib for type conversion across data types
* [SassyJSON](https://github.com/KittyGiraudel/SassyJSON): a JSON encoder/decoder in Sass
* [SassyLists](https://github.com/Team-Sass/SassyLists): a collection of functions to manipulate lists
* [SassyMatrix](https://github.com/KittyGiraudel/SassyMatrix): a collection of functions to manipulate matrices
* [SassySort](https://github.com/KittyGiraudel/SassySort): a Sass sorting function using various algorithms
* [SassyStrings](https://github.com/Team-Sass/Sassy-Strings): a collection of functions to manipulate strings
* [SassyLogger](https://github.com/KittyGiraudel/SassyLogger): a message logger in Sass
* [SassyGradients](https://github.com/KittyGiraudel/SassyGradients): a collection of tools to help manipulate gradients in a dynamic way
* [SassyIteratorsGenerators](https://github.com/KittyGiraudel/SassyIteratorsGenerators): iterators and generators implementation in Sass
## On [my blog](https://kittygiraudel.com)
* [Styling React Components in Sass](https://kittygiraudel.com/2015/06/18/styling-react-components-in-sass/) by David Khourshid (18-06-2015)
* [Translating Sass Guidelines](https://kittygiraudel.com/2015/02/03/translating-sass-guidelines/) (03-02-2015)
* [Introducing Sass Guidelines](https://kittygiraudel.com/2015/01/07/introducing-sass-guidelines/) (07-01-2015)
* [Calculating specificity in Sass](https://kittygiraudel.com/2014/11/25/specificity-in-sass/) by David Khourshid (25-11-2014)
* [Rethinking Atwood's law](https://kittygiraudel.com/2014/10/27/rethinking-atwoods-law/) (27-10-2014)
* [Translation system in Sass](https://kittygiraudel.com/2014/10/22/translation-system-in-sass/) (22-10-2014)
* [SassDoc and semantic versioning](https://kittygiraudel.com/2014/09/01/sassdoc-and-semantic-versioning/) (01-09-2014)
* [Automating CSS animations with Sass](https://kittygiraudel.com/2014/07/16/automating-css-animations-with-sass/) (16-07-2014)
* [Building a customization API in Sass](https://kittygiraudel.com/2014/07/01/building-a-customization-api-in-sass/) by Ezekiel Gabrielse (01-07-2014)
* [A new Sass mixin for offsets](https://kittygiraudel.com/2014/05/19/new-offsets-sass-mixin/) (19-05-2014)
* [Modernizr Sass mixin](https://kittygiraudel.com/2014/05/12/modernizr-sass-mixin/) by Daniel Guillan (12-05-2014)
* [Bringing configuration objects to Sass](https://kittygiraudel.com/2014/05/05/bringing-configuration-objects-to-sass/) (05-05-2014)
* [Casting a map into a list in Sass](https://kittygiraudel.com/2014/04/28/casting-map-into-list/) (28-04-2014)
* [Building a walk function in Sass](https://kittygiraudel.com/2014/04/14/building-a-walk-function-in-sass/) (14-04-2014)
* [What to do with a Sass list](https://kittygiraudel.com/2014/04/07/what-to-do-with-a-sass-list/) (07-04-2014)
* [Pushing Sass placeholders further](https://kittygiraudel.com/2014/04/01/pushing-sass-placeholders-further/) (01-04-2014)
* [Getting the most out of Sass placeholders](https://kittygiraudel.com/2014/03/31/getting-the-most-out-of-sass-placeholders/) (31-03-2014)
* [SassyMatrix: because one dimension wasn't enough](https://kittygiraudel.com/2014/03/25/sassy-matrix-because-one-dimension-wasnt-enough/) (25-03-2014)
* [SassySort: sorting algorithms in Sass](https://kittygiraudel.com/2014/03/18/sassy-sort/) (18-03-2014)
* [Another Sass button library](https://kittygiraudel.com/2014/03/03/another-sass-button-library/) (03-03-2014)
* [Star rating widget with Sass](https://kittygiraudel.com/2014/02/24/star-rating-system-with-sass/) (24-02-2014)
* [SassyCast: Type conversion in Sass](https://kittygiraudel.com/2014/01/27/casting-types-in-sass/) (27-01-2014)
* [SassyJSON: Talk to the browser!](https://kittygiraudel.com/2014/01/20/json-in-sass/) (20-01-2014)
* [Casting a string to number in Sass](https://kittygiraudel.com/2014/01/15/sass-string-to-number/) (15-01-2014)
* [String replacement function in Sass](https://kittygiraudel.com/2014/01/13/sass-string-replacement-function/) (13-01-2014)
* [Sass brainfuck](https://kittygiraudel.com/2013/11/28/sass-brainfuck/) (28-11-2013)
* [How I made a Sass debug function](https://kittygiraudel.com/2013/10/21/sass-debug/) (21-10-2013)
* [Random function with Sass 3.3](https://kittygiraudel.com/2013/10/17/sass-random/) (17-10-2013)
* [Advanced Sass list functions again](https://kittygiraudel.com/2013/10/09/advanced-sass-list-functions-again/) (09-10-2013)
* [Use lengths not strings](https://kittygiraudel.com/2013/09/03/use-lengths-not-strings/) (03-09-2013)
* [A couple of Sass functions](https://kittygiraudel.com/2013/08/12/sass-functions/) (12-08-2013)
* [Advanced Sass list functions](https://kittygiraudel.com/2013/08/08/advanced-sass-list-functions/) (08-08-2013)
* [Sass mixin for offsets](https://kittygiraudel.com/2013/08/05/offsets-sass-mixin/) (05-08-2013)
* [Understanding Sass lists](https://kittygiraudel.com/2013/07/15/understanding-sass-lists/) (15-07-2013)
* [Digging into my slides about Sass](https://kittygiraudel.com/2013/07/08/digging-into-my-slides-sass/) (08-07-2013)
* [Items on circle with Sass](https://kittygiraudel.com/2013/04/02/items-on-circle/) (02-04-2013)
* [8 Compass extensions you may not know](https://kittygiraudel.com/2013/03/25/compass-extensions/) (25-03-2013)
* [The ultimate PX/Rem mixin](https://kittygiraudel.com/2013/03/18/ultimate-rem-mixin/) (18-03-2013)
* [Can I afford a preprocessor?](https://kittygiraudel.com/2013/03/14/css-preprocessors/) (14-03-2013)
* [Sassy Media queries](https://kittygiraudel.com/2013/02/27/sassy-media-queries/) (27-02-2013)
* [Sassify a CSS shape](https://kittygiraudel.com/2013/02/18/sass-mixin-star/) (18-02-2013)
* [A closer look at my Sass structure](https://kittygiraudel.com/2013/02/11/sass-structure/) (11-02-2013)
* [Why I switched from LESS to Sass](https://kittygiraudel.com/2012/11/13/less-to-sass/) (13-11-2012)
## At other places
* [Tilted Angles in Sass](https://www.sitepoint.com/tilted-angles-in-sass/) at SitePoint (21-09-2016)
* [A Tale of CSS and Sass Precision](https://www.sitepoint.com/a-tale-of-css-and-sass-precision/) at SitePoint (12-05-2016)
* [Introducing our Newest Book: Jump Start Sass](https://www.sitepoint.com/introducing-our-newest-book-jump-start-sass/) at SitePoint (04-04-2016)
* [Cleaning Up A CSS Codebase](https://www.sitepoint.com/cleaning-up-a-css-codebase/) at SitePoint (09-03-2016)
* [Using @error responsibly in Sass](http://www.sitepoint.com/using-error-responsibly-in-sass/) at SitePoint (11-08-2015)
* [An easy way to document your Sass code](http://www.creativebloq.com/web-design/easy-way-document-your-sass-code-61515222) at CreativeBloq (27-07-2015)
* [Centering With Sass](http://www.sitepoint.com/centering-with-sass/) at SitePoint (16-07-2015)
* [Getting Started with SCSS-lint](http://www.sitepoint.com/getting-started-with-scss-lint/) at SitePoint (25-06-2015)
* [Structuring CSS Class Selectors with Sass](http://www.sitepoint.com/structuring-css-class-selectors-with-sass/) at SitePoint (09-07-2015)
* [Introducing SitePoint Sass Reference](http://www.sitepoint.com/introducing-the-sitepoint-sass-reference/) at SitePoint (24-06-2015)
* [Testing A Sass Library](http://www.sitepoint.com/testing-sass-library/) at SitePoint (23-06-2015)
* [Testing A Sass Function in 5 Minutes](http://www.sitepoint.com/testing-sass-function-5-minutes/) at SitePoint (16-06-2015)
* [Simple Gulp'y Workflow For Sass](http://www.sitepoint.com/simple-gulpy-workflow-sass/) at SitePoint (11-06-2015)
* [Sass Mixin And Media Merging](http://www.sitepoint.com/sass-mixin-media-merging/) at SitePoint (02-06-2015)
* [Sass Theming: The Neverending Story](http://www.sitepoint.com/sass-theming-neverending-story/) at SitePoint (26-05-2015)
* [Understanding Sass Units](http://www.sitepoint.com/understanding-sass-units/) at SitePoint (26-02-2015)
* [Breakpoints and tweakpoints in Sass](http://www.sitepoint.com/breakpoints-tweakpoints-sass/) at SitePoint (17-02-2015)
* [Why I Don't Use Compass Anymore](http://www.sitepoint.com/dont-use-compass-anymore/) at SitePoint (10-02-2015)
* [SassDoc 2 Shiny Streamy Octopus is Out](http://www.sitepoint.com/sassdoc-2-shiny-streamy-octopus/) at SitePoint (05-02-2015)
* [The Ultimate Long-Shadow Mixin](http://www.sitepoint.com/ultimate-long-shadow-sass-mixin/) at SitePoint (22-01-2015)
* [Extra Map Functions in Sass](http://www.sitepoint.com/extra-map-functions-sass/) at SitePoint (15-01-2015)
* [Introducing Sass-Compatibility](http://www.sitepoint.com/introducing-sass-compatibility/) at SitePoint (23-12-2014)
* [Functional wrappers in Sass](http://www.sitepoint.com/functional-wrappers-sass/) at SitePoint (18-12-2014)
* [Why you should avoid Sass `@extend`](http://www.sitepoint.com/avoid-sass-extend/) at SitePoint (11-12-2014)
* [Building a linear gradient mixin](http://www.sitepoint.com/building-linear-gradient-mixin-sass/) at SitePoint (02-12-2014)
* [FR] [Quand Sass ne rend plus service](http://www.24joursdeweb.fr/2014/quand-sass-ne-rend-plus-service/) for 24 Jours du Web (01-12-2014)
* [Sass Multiple Arguments, Lists or Arglists](http://www.sitepoint.com/sass-multiple-arguments-lists-or-arglist/) at SitePoint (20-11-2014)
* [Dealing with constants in Sass](http://www.sitepoint.com/dealing-constants-sass/) at SitePoint (28-10-2014)
* [Cubic Bezier representation in Sass](http://thesassway.com/advanced/cubic-bezier-representation-in-sass) with Tim Severien at The Sass Way (26-10-2014)
* [Debugging Sass Maps](http://www.sitepoint.com/debugging-sass-maps/) at SitePoint (21-10-2014)
* [Building a step wizard with BEM and Sass](http://www.sitepoint.com/building-step-wizard-bem-sass/) at SitePoint (02-10-2014)
* [Beware of selector nesting in Sass](http://www.sitepoint.com/beware-selector-nesting-sass/) at SitePoint (25-09-2014)
* [A bulletproof function to validate lengths in Sass](http://www.sitepoint.com/bulletproof-function-validate-length-values-sass/) at SitePoint (10-09-2014)
* [Building a logger mixin in Sass](https://webdesign.tutsplus.com/tutorials/building-a-logger-mixin-in-sass--cms-22070) at Tuts+ (02-09-2014)
* [Sass 3.4 is out!](http://www.sitepoint.com/sass-3-4-is-out/) at SitePoint (22-08-2014)
* [What's up with SassDoc 1.2?](http://webdesign.tutsplus.com/articles/new-features-and-a-new-look-for-sassdoc--cms-21914) at Tuts+ (12-08-2014)
* [Keep Sass Simple](http://www.sitepoint.com/keep-sass-simple/) at SitePoint (30-07-2014)
* [Using Sass to build color palettes](http://www.sitepoint.com/using-sass-build-color-palettes/) at SitePoint (17-07-2014)
* [How to check for dependencies in Sass libraries](http://webdesign.tutsplus.com/tutorials/how-to-check-for-dependencies-in-sass-libraries--cms-21558?_ga=1.200178030.119067414.1397820966) at Tuts+ (02-07-2014)
* [Tips to help you level up your Sass](http://www.sitepoint.com/tips-help-level-up-sass/) at SitePoint (26-06-2014)
* [All you ever need to know about Sass interpolation](http://webdesign.tutsplus.com/tutorials/all-you-ever-need-to-know-about-sass-interpolation--cms-21375) at Tuts+ (24-06-2014)
* [A better solution for managing z-index in Sass](http://www.sitepoint.com/better-solution-managing-z-index-sass/) at SitePoint (20-06-2014)
* [Useful Compass extensions that are worth a try](http://www.sitepoint.com/compass-extensions-worth-a-try/) at SitePoint (09-06-2014)
* [Using Sass maps](http://www.sitepoint.com/using-sass-maps/) at SitePoint (06-06-2014)
* [Compass or Bourbon](http://www.sitepoint.com/compass-or-bourbon-sass-frameworks/#comments) at SitePoint (29-05-2014)
* [Managing responsive breakpoints in Sass](http://www.sitepoint.com/managing-responsive-breakpoints-sass/) at SitePoint (20-05-2014)
* [A Sass mixin for CSS triangles](http://www.sitepoint.com/sass-mixin-css-triangles/) at SitePoint (15-05-2014)
* [When and how to support multiple versions of Sass](http://webdesign.tutsplus.com/articles/when-and-how-to-support-multiple-versions-of-sass--cms-20935) at Tuts+ (12-05-2014)
* [Sass mixins to kickstart your project](http://www.sitepoint.com/sass-mixins-kickstart-project/) at SitePoint (08-05-2014)
* [Sass or SCSS](http://www.sitepoint.com/whats-difference-sass-scss/) at SitePoint (29-04-2014)
* [My favourite Sass tools](http://www.sitepoint.com/my-favorite-sass-tools/) at SitePoint (22-04-2014)
* [Caching values from Sass mixins](http://www.sitepoint.com/caching-values-sass-mixins/) at SitePoint (15-04-2014)
* [Cross @media queries @extend directive in Sass](http://www.sitepoint.com/cross-media-query-extend-sass/) at SitePoint (10-04-2014)
* [A creative grid system with Sass and calc()](http://www.sitepoint.com/creative-grid-system-sass-calc/) at SitePoint (27-03-2014)
* [Creating a Rainbow Border with Sass](http://www.sitepoint.com/rainbow-border-with-sass/) at SitePoint (18-03-2014)
* [Implementing the Bubble Sort algorithm in Sass](thesassway.com/advanced/implementing-bubble-sort-with-sass) at TheSassWay (17-03-2014)
* [My current CSS and Sass styleguide](http://www.sitepoint.com/css-sass-styleguide/) at SitePoint (13-03-2014)
* [An introduction to error handling in Sass](http://webdesign.tutsplus.com/tutorials/an-introduction-to-error-handling-in-sass--cms-19996) at Tuts+ (12-03-2014)
* [Dealing with color schemes in Sass](http://www.sitepoint.com/dealing-color-schemes-sass/) at SitePoint (06-03-2014)
* [Architecture for a Sass project](http://www.sitepoint.com/architecture-sass-project/) at SitePoint (27-02-2014)
* [Is Compass to Sass what jQuery is to JavaScript](http://www.sitepoint.com/compass-sass-jquery-javascript/) at SitePoint (17-02-2014)
* [A Sass component in 10 minutes](http://www.sitepoint.com/sass-component-10-minutes/) at SitePoint (12-01-2014)
* [What nobody told you about Sass @extend](http://www.sitepoint.com/sass-extend-nobody-told-you/) at SitePoint (05-02-2014)
* [Sass: Mixin or placeholder?](http://www.sitepoint.com/sass-mixin-placeholder/) at SitePoint (31-01-2014)
* [How to programmatically go from one color to another](http://thesassway.com/advanced/how-to-programtically-go-from-one-color-to-another-in-sass) at TheSassWay (30-01-2014)
* [Math sequences with Sass](http://thesassway.com/advanced/math-sequences-with-sass) at TheSassWay (14-10-2013)
* [MetaFizzy effect with Sass](http://css-tricks.com/metafizzy-effect-with-sass/) at CSS-Tricks (12-08-2013)
* [Looking into the future of Sass](http://davidwalsh.name/future-sass) at David Walsh' (17-07-2013)
* [Create Striped Backgrounds With Gradients (and a Sass Mixin)](http://css-tricks.com/striped-background-gradients/) at CSS-Tricks (09-07-2013)
## Screencasts
* [SassBites #42](https://www.youtube.com/watch?v=H6Y9r49InXo&feature=youtu.be)
* [Podcast at CDNify](https://cdnify.com/blog/sassdoc-document-sass-files-functions-mixins/)
## CodePen / SassMeister
* [Assert system](https://sassmeister.com/gist/8b3d421c1e369ca5c88b)
* [Simple nth-of-type for IE](https://sassmeister.com/gist/5a9558e4f2c9d82a70df)
* [trim() function](https://sassmeister.com/gist/9eaa43a4a5de27647ca8)
* [Multiple properties sharing same value](https://sassmeister.com/gist/d342346d864467964b27)
* [Functional programming](https://sassmeister.com/gist/c36be3440dc2b5ae9ba2)
* [Fixing Sass / Grid layout bug](https://sassmeister.com/gist/309a459ee3a625b2ab32)
* [Advanced type checking](https://sassmeister.com/gist/2933ef053ae0bf70ad8b)
* [Dealing with context and events in a friendly way](https://sassmeister.com/gist/2f733e56552243ac9881)
* [A new clamp function](https://sassmeister.com/gist/8d24cb970d1b5f90841a)
* [Proxifying functions and mixins](https://sassmeister.com/gist/dda526ebe495b37714f2)
* [Writing modes handler](http://sassmeister.com/gist/55ed62df060dfb39b614)
* [Cast to list / change list separator](http://sassmeister.com/gist/59eebf613a953839e282)
* [Map extra functions](http://sassmeister.com/gist/f1fa4869678a4f16979c)
* [Map API polyfill for Sass 3.2](http://sassmeister.com/gist//95d78632dc2e02b905ba)
* [Initialize a comma-separated empty list](http://sassmeister.com/gist/a9e554b0e1a72a84fec7)
* [Dependency checker](http://sassmeister.com/gist/b7946f09300c1cd9abf0)
* [Some() and every() functions](http://sassmeister.com/gist/b94b72435717a759d37f)
* [Find max depth of a map](http://sassmeister.com/gist/3f1a07fd2703af2e4fef)
* [jQuery-style extend Sass function](http://sassmeister.com/gist/7525f0546479acd1d6e1)
* [Fifty Shades of Grey in Sass](http://sassmeister.com/gist/a7c097629b60c41fb259)
* [Advanced map-remove()](http://sassmeister.com/gist/11495287)
* [Float comparison](http://sassmeister.com/gist/11286934)
* [Opposite direction without Compass](http://sassmeister.com/gist/11035501)
* [Simple breakpoints manager](http://sassmeister.com/gist/11039956)
* [z-index handling in Sass projects](http://sassmeister.com/gist/11172138)
* [Map-fetch function](http://sassmeister.com/gist/9933331)
* [Caching values from mixins](http://sassmeister.com/gist/10625439)
* [Dot accessor for lists and maps](http://sassmeister.com/gist/9931274)
* [Managing vendor prefixes' aliases](http://sassmeister.com/gist/9685761)
* [Prefixer mixin](http://sassmeister.com/gist/9431719)
* [:matches() polyfill in Sass](http://sassmeister.com/gist/9481816)
* [Sass to CSV converter](http://sassmeister.com/gist/9327085)
* [An alert component in Sass](https://codepen.io/KittyGiraudel/pen/Dzloe)
* [Sass + calc: a creative grid system](https://codepen.io/KittyGiraudel/pen/hEaFt)
* [Programmatically finding one color from another one](https://codepen.io/KittyGiraudel/pen/gHEkA)
* [Levenshtein distance between two strings in Sass](http://sassmeister.com/gist/8334461)
* [Google Font Sass mixin](https://codepen.io/KittyGiraudel/pen/aEzLf)
* [Float: down with Sass](https://codepen.io/KittyGiraudel/pen/AxmBK)
* [CSS counters + Sass](https://codepen.io/KittyGiraudel/pen/mnavc)
* [Sass mixin for scrollbar styling](https://codepen.io/KittyGiraudel/pen/KFDuB)
* [Issues with Sass lists](https://codepen.io/KittyGiraudel/pen/kDvua)
* [Hyphens and underscores in Sass names](https://codepen.io/KittyGiraudel/pen/pJKek)
* [Leap-year in Sass](https://codepen.io/KittyGiraudel/pen/qrjmd)
* [Prime number in Sass](https://codepen.io/KittyGiraudel/pen/wiFHk)
* [@for loop in keyframes](https://codepen.io/KittyGiraudel/pen/Jyimb)
* [Step wizard component](https://codepen.io/KittyGiraudel/pen/scluw)
* [Nested Sass lists as property/value pairs](https://codepen.io/KittyGiraudel/pen/yGFri)
* [Differences between () and null](https://codepen.io/KittyGiraudel/pen/gaBhe)
* [Gradient from loop](https://codepen.io/KittyGiraudel/pen/poJxy)
## Community
- [Reddit](https://www.reddit.com/r/Sass/)
- [Stack Overflow](http://stackoverflow.com/questions/tagged/sass)
- [@SassCSS on Twitter](https://twitter.com/SassCSS)
## License
[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)
[![CC0](http://i.creativecommons.org/p/zero/1.0/88x31.png)](http://creativecommons.org/publicdomain/zero/1.0/)
To the extent possible under law, [Kitty Giraudel](https://kittygiraudel.com) has waived all copyright and related or neighboring rights to this work.
[sass.md Github](https://github.com/Famolus/awesome-sass
)