Wynn Netherland - Sass and Compass in Action

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact

Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 261 Shelter Island, NY 11964 Email: orders@manning.com

2013 by Manning Publications Co. All rights reserved.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps.

Recognizing the importance of preserving what has been written, it is Mannings policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine.

Manning Publications Co.20 Baldwin RoadPO Box 261Shelter Island, NY 11964

Development editor: Scott StirlingTechnical proofreader: Matt MartiniCopyeditor: Andy CarrollProofreader: Katie TennantTypesetter: Dottie MarsicoCover designer: Marija Tudor

ISBN 9781617290145

Printed in the United States of America

1 2 3 4 5 6 7 8 9 10 MAL 18 17 16 15 14 13

To those who craft the web and delight in the work of their hands

Just a few short years ago, the idea of a book on Sass or Compass seemed absurd. As early adopters, we knew we had seen the future of stylesheet authoring, but we struggled to gain much traction outside the Ruby community in which Sass was born. Developers often didnt see the dichotomy of using frameworks to create dynamic web pages while still writing static CSS by hand. Yet others were distrustful of Sasss only syntax at the time, the original indented, whitespace-significant syntax. It felt too rigid, like too much of a departure from CSS.

In 2010, as we worked to evangelize the benefits of Sass to our designer friends across the industry (and making some converts, we should add), Sass and the idea of preprocessed CSS began to get a foothold in development and designer circles. When Sass introduced the SCSS syntax, many of the objections to adopting Sass began to fade away and we saw a real tipping point in projects using Sass for stylesheet authoring.

At the time, many other languages with a similar vision were emerging. Much like Sirius and XM validated the idea of satellite radio, healthy competition helped validate the idea of preprocessed CSS. It was in this environment of initial industry curiosity that Manning approached us to write a book about Sass and Compass. We agreed to write this book because we wanted to share Sass with a broader audience. While its taken much longer to produce than we wanted due to career moves and major life events for each of us, were excited to offer this book to the community that has grown up around Sass.

If youre new to Sass, we hope it provides a solid foundation for the language and opens your eyes to new techniques. Even if youve been writing Sass for many years, were confident youll deepen your understanding of advanced Sass and Compass features that youll take back to your own projects.

We couldnt write a book about Sass (and Compass by extension) without thanking Hampton Catlin. Sass has made CSS fun again for so many of us. Though the syntax has evolved, Sass has always kept to the spirit of CSS while extending it in powerful ways. Hamptons vision and hard work have made an indelible mark on the project and the community.

Chris Eppstein, we (your coauthors), would like to extend our sincere appreciation to you. Without your tireless efforts extending and maintaining Sass and Compass over the last few years, we can say with certainty that the community would not be what it is today.

Wed like to thank the folks at Manning for sticking with us during a long, long journey to get this book published. Writing a book about fast-moving open source is always difficult, as the landscape is constantly shifting. Were excited to put this book in the hands of designers and developers wanting to level up their front-end tools.

Finally, special thanks to our technical proofreader, Matt Martini, for his careful reading of the final manuscript shortly before it went into production, and to the following reviewers, who read our chapters several times at different stages during development and offered invaluable feedback: Adam Michela, Adam Yonk, Andrea Ferretti, David A. Mosher, David Landau, Ezekiel Templin, Graham Ashton, Jacob Rohde, Jake Stutzman, James Hafner, Jason J. W. Williams, Jeremiah Stover, Jeroen van Dijk, Ken Paulsen, Kerrick Long, Kevin Sylvestre, Kyle Wild, Ron Chloupek, Ryan Kelln, and William Dodson.

W YNN N ETHERLAND

I would like to thank my wife Polly for dealing with the stress and deadlines of yet another manuscript. Thanks for loving this crazy person.

Id also like to thank Jason J. W. Williams, another Manning author, for sharing his polyglot authoring toolchain and countless hours of technical support.

So many of us pick up techniques from the community, learning stylesheet hacks and other tricks in short-form blog posts or screencasts. This book aims to present a top-down survey of two toolsSass and Compassto expand your CSS toolkit and make you a better stylesheet author. While focusing on practical application, we take a systematic approach to teaching Sass syntax and applying the patterns in the Compass framework. Hopefully, the reader will walk away with a more complete understanding of both Sass and Compass.

This book is designed for two main audiences. First, we want to reach out to web designers, those who write a lot of CSS but might not have considered ways to automate parts of the stylesheet authoring process. Second, we want to show full stack developers how to treat stylesheets, images, and fonts like any other project asset and how to handle them throughout the lifecycle of a project from development to production.

If youre new to Sass and Compass, you might find yourself jumping to as you begin the book. Those appendixes provide setup instructions and other prerequisites youll need for the book.

dives right into the powerful features of the Sass language. Youll discover not only exciting features, but hopefully a renewed joy for CSS when the tedium of static stylesheets disappears. Well also give you a taste of the Compass framework in examples that provide practical application of Sasss features.

goes deeper into Sass and covers variables, mixins, and other language features that provide the building blocks for the rest of the book.

jumps right into one of the most common uses for CSS, building grid systems. As youll see, with Sass, theres far less math involved.