I’d like to tell you about my second book, ‘Sass and Compass for designers’.
For the last couple of years I have been using the CSS preprocessor Sass and its companion authoring framework, Compass. I haven’t written ‘vanilla’ CSS since (save the odd amends to others work). I always use Sass and Compass.
When I show others what Sass and Compass can do and how it can help them write CSS easier it’s a no-brainer. What’s to not like?
Once people get ‘up and running’ with Sass and Compass they rarely go back. I don’t personally know anyone who has decided it’s not for them, given up and gone back to writing vanilla CSS.
However, without someone to ‘show you the ropes’ I do feel the barrier for entry for using Sass and Compass can be a little high. I certainly struggled hours at a time at the outset, trying to make sense of things. When looking at the code and all the new terminology it can be intimidating. Plus there’s the (unfairly) reviled Command Line to deal with.
We can use Sass and Compass just fine nowadays without the command line but the book still covers all that as it really helps make the most of the advanced features.
Throughout the book, you’ll be using Sass and Compass to build up the test website www.sassandcompass.com from scratch.
Want to know if the books for you? Here’s what each chapter covers:
Getting started with Sass and Compass
In this chapter we will understand where Sass and Compass originated, how they are maintained and who maintains them and understand exactly what they are. After a brief overview of some tasty features (nesting, @extend, mixins, colour manipulations) we will get Sass and Compass installed. Both command line and GUI install options are provided so if the thought of using the command line makes you heave, you can consider CodeKit, LiveReload or Scout.
Setting up a Sass and Compass project
This chapter is all about getting a solid foundation for all future based Sass and Compass projects. We will learn how to configure Compass projects, amend the Compass config file, change the format of CSS that Compass outputs, the different comment types available in Sass, how to create and use variables and how to create a custom ‘base’ Sass and Compass project that can be used as a starting point for future projects.
Understanding Nesting, Extend, Placeholders and Mixins
This chapter covers all the workhorse features of Sass and Compass. What nesting is, how to use it (and when you shouldn’t) and how it can be used in tandem with the parent selector and Modernizr to create easy ‘forks’ in CSS. We will learn how to extend previous rules and also create placeholder selectors so that oft used snippets can be extended only when needed (if it doesn’t now, don’t worry, all that will make sense when you read it I promise). Finally we will look at mixins. What they are, how they work and even write our own simple mixin.
Manipulate colour with ease
Chapter 4 is all about manipulating colour with Sass and Compass. We will learn how to easily make conversions from hex to RGBA, adjust hue lightness and saturation, lighten and darken colours. Trust me, once you master the Sass and Compass colour techniques, you’ll never open a colour picker again.
Responsive and flexible grids with Sass and Compass
Making responsive and flexible grids with Sass and Compass is easy. If you are currently adding HTML classes into markup to use a grid system, kiss those dark ages goodbye! We will look at the superb Susy grid system and learn how to create a ‘mobile first’ responsive design with ease (also take a look at the bonus online section for creating an ‘off canvas’ layout) that scales from small to large screen effortlessly. We will also consider sub-pixel rounding issues and see how Susy can negate those too.
Easy media queries for responsive designs
Creating and using media queries for responsive designs with Sass and Compass is so easy it almost feels like cheating. In this chapter we will create our own custom mixin to easily create media queries ‘inline’ with other styles (rather than writing them all at the end of the CSS). Worried about all the code bloat that might cause? Don’t worry, that’s covered too.
Easy CSS3, image sprites and more with Compass
Compass has been used on and off during the previous chapters but this chapter lets Compass really shine. Make box-shadows, gradients, data URIs, CSS filters, multiple-columns, transitions, image sprites and more, faster and easier than you might believe possible.
Using programmatic logic in Sass
At this point, it’ll be hard not to cackle with delight at the new found power at your fingertips. However, you’d better know that Sass and Compass go up to 11. In this chapter we will demystify the mathematical functions of Sass. Alongside standard fare like multiplication and division we will learn how to understand, write and use @if, @for and @each loops. If that wasn’t enough we will cover functions, how to strip and add units and how to use the @debug directive to, you know, debug.
Becoming a Sass and Compass power user
The ‘show-off’ chapter. Besides reviewing all the code we have produced so far (re-revisiting some do’s and do not’s), we will cover some of the more obscure, yet powerful features of Sass and Compass. Learn how to switch off support for different browser vendors, how to use Sass globbing to import batches of files, how to clear the .sass-cache and force a compile, how to use the interactive shell and view Compass generated statistics for the Sass and CSS files. When you’re done you can really impress your friends (or, you know, cause them to leave the room shaking their head whilst muttering ‘what a geek’).
Elephants in the room I’ve been working on this book for the best part of the last 12 months. It didn’t escape my notice (understatement) that A Book Apart have recently announced a book by Dan Cederholm called ‘Sass for web designers’. It’s obviously unfortunate that our two books have such similar titles but it is, I’m quite certain, a complete coincidence. I’ve read Dan’s books in the past. They are always brilliant so ‘you pays your money you takes your pick’.
There is also ‘Sass and Compass in action’ by Wynn Netherland, Nathan Weizenbaum (current project lead of Sass), Chris Eppstein (Sass core team and creator/lead of Compass) and Brandon Mathis (Sass and Compass genius, Compass core team member). It goes without saying, this should be worth your attention too.
I dare say there will be plenty more Sass and Compass books on the market this year as everyone who uses and loves them wants to let you know about them!
I think it’s quite nice that the publisher of my book also has a Open Source Royalty Scheme. This means that a royalty from any money made from this book will be donated to the open source projects Sass and Compass. I’d also like to take this sentence to remind you that Compass is ‘donation ware’. If you use it, please consider donating what you can to the United Mitochondrial Disease Foundation (UMDF).
I was lucky to get some incredible technical reviewers for this book. It’s a thankless (and pay-less!) task to tech review a book so I would like to extend a massive thanks to the following super smart people that helped keep me honest whilst writing the book:
Dan is irritating. Irritating because not only does he have a great visual flair, countless great projects he has created and contributed too and an incisive and creative brain, he’s also about 15 years my junior. See? Irritating isn’t it.
I can say with absolute certainty that Matt Mitchell is the best designer you have (probably) never heard of. He’s the Head of Web Design at bet365.com, the world’s largest online gambling company. Besides the (not insignificant) task of designing interfaces that are used by, literally, millions of people everyday, he’s finally starting to spill the beans on the things he considers important with design. I think he’s worth every moment of your attention, be sure to check out his website. Furthermore he packs an awesome right hook!
Some people have the kind of sharp mind I envy. Matt Wilcox is one of those people. He has a clarity of thought that is second to none. Have you seen and used Adaptive Images? Have you used the enochs.co.uk site (don’t click now, you’ll be there some time and I still need your attention). How about his summary on responsive images at the Opera developer site.
Foreword by Andy Clarke
Andy Clark (twitter: http://twitter.com/malarkey web: http://stuffandnonsense.co.uk) has also been kind enough to write me a foreword for the book. I am both flattered and honoured that he agreed to do so. You know Andy right? In case you have been under a rock, he’s the co-host of the Unfinished Business podcast, originator of the ‘320 and up’ framework, writer of the ‘contract killer’, popular speaker and author of the books ‘Hardboiled web design’ and ‘Transcending CSS’.
I wrote the foreword for @benfrain’s ‘Sass and Compass for Designers’ book. It’s a cracking read. Look out for it.— Andrew Clarke (@Malarkey) April 18, 2013
Availability The book was released in April 2013. You can order:
I really hope you enjoy the book and as ever, look forward to hearing your thoughts.