Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/KittyGiraudel/awesome-sass

A curated list of awesome Sass.
https://github.com/KittyGiraudel/awesome-sass

List: awesome-sass

Last synced: about 2 months ago
JSON representation

A curated list of awesome Sass.

Awesome Lists containing this project

README 

        
# Awesome Sass



**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. :)



## Books



* [Jump Start Sass](http://howsass.works): a beginner’s guide to get started with Sass



## 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)



## License



[![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.