Learn Sass

Quick Start Resources to Learn Sass

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.

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:

  • SassSyntactically awesome stylesheets
  • SaaSSoftware 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

Sass for Web DesignersI 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.

13 thoughts on “Quick Start Resources to Learn Sass”

  1. Thanks for a great post, I’m going to give it a go – I’ve heard that once you take the plunge you never look back!

  2. Hey Carrie! First. I wanted to tell you what a great job you are doing GOH! Love them!

    Sass is my new favorite thing. I’m just about done with an online training via Team Treehouse that I highly recommend. It’s a membership site but I think you can get the first 30 days free – plenty of time to take the class – and then get hooked on the rest of their training. 🙂

    1. Thanks Pam! Glad to hear the Treehouse course is good. I tried a Sass class from another e-learning site and it was awful. Thanks, too, for being a GOH supporter! Hope to “see” you tomorrow at 1p central! 🙂

  3. For developing a complex theme or framework or website where there are many hundreds or several thousand lines of CSS, there is no doubt that any pre-processor like SASS or LESS is going to be beneficial.

    But if you are a web designer where you take a (Genesis) child theme and modify it slightly such that you don’t have many repeating items (i.e need for $ variables) I think SASS becomes a solution in search of a problem. (We always use a ‘custom.css’ file which we import via PHP code in functions.php but it can be imported via the CSS $import command as well.)

    Also, many web shops put up a “coming soon” index.html page in the web root and build out the site in a sub-directory. They do NO use a local WordPress environment. Thus, SASS becomes a bit more problematic. There are some plugins that will work, but as we all know, there is the element of risk whenever you introduce third-party code into your site that has not been well vetted by a reliable community (i.e. the Genesis eco-system… people like our own Carrie.)

    I’m not saying to not to use SASS. I’m just saying that for many shops it is simply not needed and will only help to over-complicate the design process.

    Oh, and for those who want to know how to make that sub-directory “live” when you are finished with the build-out, all you have to do is put the following in the .htaccess file in the web root:

    Redirect 301 /index.php http://www.the-domain.com/the-subdirectory/

    1. Yes – no sense in “sassifying” an existing Genesis child theme – that’d be more work than is worth the benefit. But for all other “from scratch” projects, anything that speeds up the process is quite welcome.

      What do you mean about Sass being problematic with an index.html page? A theme in a sub-directory would have no impact on that file..

  4. “True, one could use SASS locally and continually upload the CSS to the server, but few serious developers will do that.”

    I respectfully disagree with this.

    Front-end development workflow should look like this: design/develop/compile locally. Then push CSS to your staging environment, and finally, (after everything looks good), push to your live environment.

    Ideally, you’d use version control (git or svn) to manage code and deployments would be handled by Beanstalk or a free service like dploy.io

    When you work locally, there is no need to “continually upload” anything!

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.