Sass for Web Designers

I look forward to Dan Cederholm’s books more than those of any other web author. Dan has a gift for explaining essential new front-end design techniques with great clarity, and providing code examples that developers can actually use for day-to-day design work.

His first book, Web Standards Solutions, published 10 years ago now, gathered under a single cover the core CSS techniques that made possible the era of standards-based web design. Bulletproof CSS, which followed a year later, showed how to combine those techniques to craft beautiful, robust CSS interfaces. A couple of later books, Handcrafted CSS and CSS3 for Web Designers introduced and set out practical uses for the emerging capabilities of CSS3.

For me, all these proved themselves as the most valuable kind of design book: the ones that you keep on your desk and refer to every working day.

Sass for Web Designers is another Cederholm workhorse: a simple, unfussy, an eminently useful guide to the latest CSS paradigm shift: the development of the pre-processor languages. Dan wisely focuses on Sass, which has emerged as the most popular pre-processor.

I’m glad that at the outset of the book Dan describes himself as a ‘reluctant convert’ to the pre-processor concept. Me too. For those of us who have been writing ‘traditional’ CSS for some years Sass feels like a radical change, more so, I think, than it does to younger designers, many of whom seem to have adopted pre-processors almost as soon as they became available.

Intellectually, I get it. Sass variables, mixins et al provide powerful new tools for removing the repetition and clutter characteristic of CSS. They allow the application of proper DRY (Don’t Repeat Yourself) coding principles to stylesheets, making it possible for web designers – finally – like other coders, to write commonly-repeated patterns just once, and reuse them intelligently throughout an application.

No-one who has read even one introductory article to Sass can doubt its promise. But emotionally, it’s hard for those of us who have been writing ‘raw’ CSS for so many years to adapt. You get to know – and even love – CSS as it is, with all its faults. To know the language’s inherent strengths and weaknesses, how and when to use hacks, how best to structure stylesheets, the precise mapping of selectors onto HTML. Working directly with the language, one develops a proprietorial sense of craftsmanship, and suspicion of innovations that by adding a new layer of abstraction threaten to set the designer at one remove from their code.

Sass, with its intimidating army of frameworks and mixin libraries, threatens to mechanise the the development of CSS, to dissolve that sense of craftsmanship, of intimate understanding of the inherent qualities of the material with which one is working. In his wonderful book The Craftsman Richard Sennett describes the maker’s concern for mastery over the tools of their trade:

The enlightened way to use a machine is to judge its powers, fashion its uses, in light of our own limits rather than the machine’s potential. We should not compete against the machine.

A concern with craftsmanship runs like a golden thread through all of Dan’s books (as is clear from the title of least one of them), and throughout Sass for Web Designers he is at pains to stress that the new powers pre-processors offer should only be appropriated if they are fully understood. It is critical that the designer understands how the mixins they use are constructed, and the CSS code they generate. Otherwise the control that is the hallmark of the craftsperson is lost.

So, rather than diving into the nuts and bolts of the language, the book’s first chapter, ‘Why Sass?’, seeks to reassure: Sass need not impose, but can be adopted gradually. Sass extends rather than replaces CSS, so SCSS files can be structured exactly as ‘traditional’ CSS files, and can incorporate as much or as little Sass functionality as required. This flexibility makes it possible for sceptics to harness the power of Sass, to incorporate it within long established CSS workflows, to use only those features that simplify, and avoid those that seem to over-complicate.

The second chapter, ‘Sass Workflow’, explains how to get Sass up and running, whether through the command-line or one of the many apps – CodeKit, Hammer for Mac, Scout and so forth – that run Sass through a visual interface.

The third chapter, ‘Using Sass’, is the heart of the book. Here Dan provides a thorough introduction to the core Sass features: nesting rules, mixins, extends and content blocks. By its end you know all you need to know to start using Sass for day-to-day work.

The discussion of mixins is particularly useful. There is nothing earth-shattering here: the examples Dan uses are the kind of bread-and-butter mixins found in any half-decent Sass library, things like border-radius, box-shadow and linear-gradient. But, crucially, as in all of his books, Dan takes the time to explain his examples thoroughly. Every step in the construction of each mixin is described carefully, allowing the reader to grasp the principles necessary to build and extend mixins of their own. Here we get the kind of thorough instruction that plug-in-and-play Sass frameworks and libraries so often fail to provide. Indeed Dan recommends that designers build their own mixin libraries, step-by-step, rather than simply adopting a pre-built framework. This way one retains that important sense of ownership and control over one’s code.

The final chapter, ‘Sass and Media Queries’, takes things a step further, talking us through the construction of some exceptionally useful Sass techniques for simplifying the use of media queries, including nested media queries, powerful media query mixins, and HiDPI mixins for serving differently sized background images to different screen resolutions. Again, there’s nothing particularly new: everything here can be found in a decent Sass library. But on concluding the chapter you actually understand how everything works.

The book concludes with a useful resources section, referencing some of the most useful Sass tutorials, mixin libraries, apps and frameworks.

Reading this profoundly sane little book reassured me that, despite initial reluctance and some wobbles, I’ve been right to invest time trying to get to grips with Sass over the past few months. It’s given me the confidence to ignore the siren voices of some of the best known frameworks, which threaten to overwhelm, and continue to press on with the ongoing development of my own modest setup, comprising aspects of the Bourbon Sass library, a few hand-built mixins and variables, and the Hammer for Mac app. Others will favour different arrangements of course, but this is all I can get my head around just now, without losing control.

Dan’s book, I hope, will convince other sceptics that it’s possible to take on Sass without damaging a hard-won, well established workflow. Used with caution Sass and other pre-processors offer exceptionally powerful new tools, and I think it’s become clear that they herald the future of CSS. Chris Coyier puts it nicely in the book’s foreword:

Just as a craftsman of wood knows when his chisel is dull, Dan knew that working directly in CSS these days is just like that dull chisel: you can do it, but you’re liable to hurt yourself.

Justin Reynolds

Subscribe to our mailing list