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