Ben Frain - Sass and Compass for Designers

One day, a few years ago, I tweeted (https://twitter.com/Malarkey/status/6435096054):

"Pro tip 'If your CSS is complicated enough to need a compiler or pre-processor, youre [sic] doing it wrong!'"

After all, CSS isn't difficult to learn and it's easy to write and write quickly, so why would you need something like Sass?

People reacted (as they do) and told me I was wrong. They offered plenty of advice and plenty of reasons why using Sass would benefit what I do. I wasn't oblivious to their enthusiasm, so I pulled up the Sass website, ready to dive in:

"First of all, let's get Sass up and running. If you're using OS X, you'll already have Ruby installed. Windows users can install Ruby via the Windows installer, and Linux users can install it via their package manager."

Oh.

"Once you have Ruby installed, you can install Sass by running gem install sass."

Now you can berate me for not understanding the command line, if you like, but I'm a designer, not a developer. My degree is in Fine Art, not Computer Science. My background is print, not programming so I'll trade your ruby gems for my under-color removal and dot gain any day of the week.

How hard should this Sass thing be anyway?

That hard? Obviously.

My problem was that Sass documentation had typically been written by developers for developers. It used technical language and references and made assumptions about what a person wanting to get started with Sass would know. As I wasn't familiar with neither its language nor technologies I felt frustrated, stupid even, for not understanding and as a result I avoided using Sass for a long time.

Over the last few years, using HTML and CSS as tools as well as deliverables has become a huge part of my design workflow. I use code like I use Fireworks and I quickly iterate through design ideas by rapidly writing and rewriting CSS. I need writing code to be fast and fluid so I look out for tools that reduce friction.

Sass was a clear choice, and today I can't imagine writing CSS without it. I'd miss its extends, nested selectors, and variables. I'd miss mixins and the way Sass helps me manage color throughout my style sheets. But getting comfortable with Sass took more time than I would've liked.

That's why I wish I'd had this book when I was learning Sass. Ben has a rare talent for explaining complex concepts in clear language and he makes everything look simple and sound enjoyable. As a designer I felt Ben had written this book with me in mind and I'm sure developers will feel the same way.

I hope, no I know, that you'll enjoy this book as much as I did.

Andrew Clarke

Andrew Clarke is a web designer at Stuff and Nonsense (http://stuffandnonsense.co.uk), author of the best-selling book Transcending CSS and the critically acclaimed Hardboiled Web Design , and co-host of the web business podcast Unfinished Business (http://unfinished.bz).

Ben Frain has been a frontend web designer/developer since 1996. He also works as a technology journalist, contributing regularly to a number of diverse publications on the Mac platform, consumer technology, website design, and the aviation industry.

Before that, he worked as an underrated (and modest) TV actor, having graduated from Salford University with a degree in Media and Performance. He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work he enjoys simple pleasures; playing indoor football while his body (and wife) still allow it, and wrestling with his son.

Visit him online at www.benfrain.com and follow him on Twitter at twitter.com/benfrain.

Thanks first and foremost to the creators, maintainers, and contributors to the Sass and Compass projects. Thanks to their combined efforts we have a brilliant tool that makes wrangling cross-browser CSS easier than ever before.

Next, I'd like to thank the technical reviewers of this book for giving up their free time to provide heaps of valuable input to make this a better product.

Finally, a note of appreciation to my family. Many episodes of sub-standard TV (wife), delicious cups of tea (parents), and piratical sword-fights (son) were sacrificed for the writing of this book.

Daniel Eden is a student, writer, designer, and developer from Manchester, UK, currently studying at Nottingham Trent University. In 2011, he created the CSS animation library, Animate.css, which has since been used by companies such as Hipstamatic, Foursquare, and EA Games.

Matt Mitchell is a graphic designer, who fell in love with designing for the web 10 years ago. With that came an unhealthy obsession with typography, grids, and harmony in design. He'll bore anyone who will listen about the power of musicality and proportion, never quite getting over the failure of his many musical projects. Currently head of web design at www.bet365.com, he has to fight the strong urge to be a designer by day and by night.

See what Matt's up to at mattmitchell.co.uk or on Twitter @_m_d_m.

Matt Wilcox is lead developer at View Creative Agency; a team of twenty-something designers, illustrators, typographers, artists, and web-developers working hard to raise the reputation of North Wales' creative sector. His role encompasses the frontend skills he's honed since starting out in the industry nine years ago and includes continual learning, sharing of ideas, teaching, project management, and meeting the unique challenges of working with a mix of clients and co-workers from differing creative backgrounds. He's sure no other group could have come up with something like our local chippie's website (http://enochs.co.uk) while simultaneously delivering big-name projects for world-renowned companies in both electronic and print media.