If you’re a web developer, chances are you’re always looking for ways to improve your workflow, ways to do things faster.
If you work with a lot of CSS, you may have already embraced the greatness that is Sass (Syntactically awesome stylesheets), but if you haven’t, this post has some quick-hit resources to learn Sass (or at least bring you up to speed on it).
Your First Lesson
I jokingly posted this tweet and got some funny responses.
Sass vs SasS vs SASS. #discuss
— carrie dils 🇺🇦 ✪ (@cdils) June 11, 2014
Truth is, those are different things. I frankly don’t care how you capitalize your words, but if you want to be proper about it, here’s a quick lesson:
- Sass – Syntactically awesome stylesheets
- SaaS – Software as a Service
- SASS – Something teenagers are good at
Look at that, you’re already getting an A+ here. (or is that an a+)
Get Up and Running Quickly With Sass
Okay, below are three ways to delve into Sass, from a quick introduction, to a full course. There are a ton of other resources available to learn Sass, but these are the ones I have experience with and enjoyed.
An Introduction to Sass Basics, WordCamp Style
Time to complete: 38 Minutes
Cost: Free
Earlier this month I had the pleasure of meeting Rona Kilmer and attending her Sass Class at WordCamp Orange County. Below is her presentation video and here are her slides. She gives a fantastic overview of what Sass is and what it can do for you.
Before you dive deep into a course, check this out first to see if you’re interested in learning more.
(if you have trouble with the video, view it here instead)
Up and Running with Sass, Ebook Style
Time to complete: 2-3 hours (give or take with your reading speed)
Cost: $9 Ebook
I can’t remember who recommended the Sass for Web Designers book to me, but thank you whoever you were! Published by A Book Apart, Sass for Web Designers takes a stab at Sass from the perspective of a web designer already entrenched in CSS.
Through the book, you’ll get help setting up Sass on your local workstation, an overview of a Sass workflow, lots of usage examples, and more.
I’m here to show you how Sass doesn’t have to disrupt your process and workflow, and how it can make your life easier. I’ll demonstrate the various aspects of Sass, how to install it, how to use it, and how it’s helped me in my own projects. With any luck, I just might make you a believer as well.
-Reluctant Sass convert and author, Dan Cederholm
Responsive CSS with Sass and Compass, Video Style
Time to complete: 3hr 22m
Cost: Free 7-Day Trial Membership
This last one is the biggest in terms of time commitment, but if you’re a visual learner, a video tutorial series is a great way to go. Responsive CSS with Sass and Compass is a course from the Lynda.com online video library. Here’s an intro video to give you a feel:
If you want to explore more, you can polish off the course with a complimentary 7-day trial using my Lynda.com author link and then searching the Lynda library for “Sass”.
Why are you still here reading? Go learn Sass already!
My hope is to give you a push in the right direction if you’re wanting to learn Sass. Know of another great resource that I missed? Leave a comment!
As a side note, if you’re a Genesis Framework user, here’s a Genesis Starter Theme rocking Sass.
I’m thinking that using SASS on a genesis child theme would still be worth while in many cases. I haven’t SASS’D yet but will try it reall soon. SASS variables and colour functions (lighten/darken tint/shade) excite me – am hoping they’ll help expedite colour consistency & theming etc. SASS shouldn’t add much to my workflow (I hope lol)