Files
awesome-awesomeness/readmes/sass.md7
2024-04-20 19:22:54 +02:00

209 lines
20 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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 beginners 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.