Wow - another great book from the folks over at A Book Apart. After reading most of the series up until now, I was more than excited to hear of their newest release - Sass for Web Designers. If you’re not familiar with this series of books, I cannot recommend them enough. They are, as told by ABA themselves, brief books for people that make websites. They act as quick, concise reads that can ramp up a new skill for a web designer of any skill level.
My favorite aspect of these books has always been their natural writing style combined with real-world applications. This particular book took it a step further with the designer’s personal workflow revealed throughout the book - a very helpful tool to anyone learning a new or foreign skill set. I tend to learn best by doing, or watching others do - so this was a very welcome writhing style for me as a reader/learner.
My personal transition to using Sass came about a few years back, when I was introduced to the powerful preprocessing syntax on a project at work. This really opened my eyes to the power of using a preprocessor language when writing CSS and I haven’t even considered looking back since.
What I Learned
As I just mentioned - I’ve been using Sass in my position for the better part of two years now. After completing this quick book I was fairly surprised with how many new tricks I was able to pick up! Here are some highlights of my takeaways - this post may be brief because I can't wait to apply these new tricks to my ongoing projects!
Installing Sass from the command line
I'll be honest, terminal scares me. I have little to no idea of what commands to enter or how to properly use it -so I do so very sparingly. The book provided simple, straightforward instructions to install the sass ruby gem from the command line! +1 terminal skills for me! Now I can watch my Sass files from terminal and output the corresponding CSS stylesheets without ever needing a 3rd party application.
Sass offers several output styles
Prior to reading this book I had no idea about the output options that Sass enables. The default is simply nested, making your styles indented and fairly human-readable. This has the advantage of allowing others to learn from your code. Other styles include expanded, compact and compressed. With this new knowledge I will definitely be pushing for the compressed output style on production stacks to boost efficiency. Most inspector tools built into browsers will parse the code for you anyhow.
Nesting namespaced properties
In addition to nesting rules, the author describes how you can nest properties that share the same namespace in Sass. I had no idea! This will really dry up my typography mixins using the "font-" and "text-" selectors.
Commenting in Sass
I'm almost embarrassed to say that I wasn't away for the different options for commenting in a Sass file! You can use regular 'ol /* comments */ as well as the // prefix at the beginning of a single line to produce a comment. These single line comments are especially powerful, as they are excluded from the output file. A great tool for commenting code within a shared file or for internal documentation.
Placeholder Selectors, FTW!
With Sass, you can create classes solely for the purpose of extending them later in your styles. This has immense possibilities for a style guide document. Defining placeholder classes will result in them not being output to your compiled code, only if they are extended. This can really help to DRY up your output CSS docs on larger projects.
Sass Can Concatenate
You can create strings with argument variables such as background-image: url(ii/img/' + $file + '.' + $type); to craft complex yet incredibly powerful systems in your styles.
Sass Resources
The book's appendix also served as a great tool of resources on the subject. Some of my favorites below.
In Conclusion
If you make websites, you should read this book. If you don’t use Sass yet in your front end development workflow, you will be so happy that you did after picking it up. It’s fairly easy to learn, and in my opinion how CSS should have been developed in the first place. You can pick up the book on their website for a mere $18, money well spent. Happy coding!
Published by: Ray in Best Practices, CSS, Learning, Responsive Web Design, Sass