Sass resources for web designers and front-end developers

If you’ve decided Sass is snazzy and want to learn more, I’ve gathered up some links I’ve found useful and hope you do, too.

Reading & learning about Sass #

While you might not start out reading the Sass documentation, sooner or later you’ll end up there in order to learn more about a feature of Sass or its limitations. For example, after just saying earlier this month that I don’t do much theming, I found myself needing to create some themes for a web form and spent some time reading up on the !default flag.

Thankfully, there’s more interesting things to read out there other than the docs. Two blogs I follow and recommend include Kitty Giraudel’s blog and The Sass Way. You’ll note some links from the former to the latter, as Kitty is a contributor to The Sass Way. I also keep up with via Sassnews, a weekly email newsletter.

If you like learning and connecting in person, there’s Camp Sass in the spring and SassConf in the fall. Some cities (like DC) have Sass-focused meetups, and you can also look on Meetup for general web dev/design groups that might feature Sass talks.

Libraries, grids & more #

There’s a wealth of resources out there for making your already awesome and efficient Sass even better. I use Bourbon, a mixin library, in almost all my projects, as it’s lightweight, allows me to avoid handcoding vendor prefixes (@include display(flex) and @include placeholder FTW) and just allows for simpler, cleaner code (like @include clearfix and #{$all-text-inputs}).

I also really like David Clark’s library of Sass utilities, Scut. Even when I don’t import his whole library, I reliably include his REM with fallback mixin and, when a design calls for it, Side-Lined mixin.

The same folx who made Bourbon also make a semantic grid framework (Neat), style scaffolding (Bitters) and a pattern library (Refills). As much as I like Bourbon, I don’t use these elements a whole lot (I could and should probably do a post just about the troubles I’ve encountered with grid frameworks), though I’ve had a few occasions to use the unstyled Refills components.

Because of my allegiance to and pleasure using Bourbon, I’ve not returned to using the granddaddy of Sass libraries, Compass. Though I used Compass first, I felt it was bloated and slow. Kitty does a good run down of the differences between Compass and Bourbon, though keep in mind that piece is now over a year old.

Similarly, I’m aware of the media query library Breakpoint and saw a mind-bendingly awesome presentation about the grid framework Susy…but haven’t really used either in projects. That’s not a slam against their usefulness, though. I know they’re both popular and expect that’s for a reason.

Of course, if none of the above float your boat or meet your specific needs, you can also check out mixins via Sache or by searching Github or Gists.

So many options!

Trying out Sass #

Once you have a neat idea or some code, it’s helpful to have a place to play with it. Luckily, you have two great options in Sassmeister and CodePen, both of which support Sass (and, importantly, for my purposes, Bourbon). I use CodePen almost exclusively, but Sassmeister gives you more Sass-specific options (for good reason) and helps you understand the CSS output better (especially useful if you’re just starting out in using Sass).