Table Of Contentwww.it-ebooks.info
Sass and Compass for
Designers
Produce and maintain cross-browser CSS files easier
than ever before with the Sass CSS preprocessor and
its companion authoring framework, Compass
Ben Frain
BIRMINGHAM - MUMBAI
www.it-ebooks.info
Sass and Compass for Designers
Copyright © 2013 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means, without the prior written
permission of the publisher, except in the case of brief quotations embedded in
critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy
of the information presented. However, the information contained in this book is
sold without warranty, either express or implied. Neither the author, nor Packt
Publishing, and its dealers and distributors will be held liable for any damages
caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.
First published: April 2013
Production Reference: 1180413
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84969-454-4
www.packtpub.com
Cover Image by Shutter Stock
www.it-ebooks.info
Credits
Author Project Coordinator
Ben Frain Joel Goveya
Reviewers Proofreaders
Daniel Eden Maria Gould
Matt Mitchell Paul Hindle
Matt Wilcox Vivienne Frain
Acquisition Editor Indexer
Edward Gordon Tejal Soni
Lead Technical Editor Production Coordinator
Azharuddin Sheikh Conidon Miranda
Technical Editors Cover Work
Soumya Kanti Conidon Miranda
Dominic Pereira
Varun Pius Rodrigues
www.it-ebooks.info
Foreword
You're doing it wrong!
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,
you're [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?
sass --watch style.scss:style.css
sass --watch stylesheets/sass:stylesheets/compiled
That hard? Obviously.
www.it-ebooks.info
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).
www.it-ebooks.info
About the Author
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.
www.it-ebooks.info
About the Reviewers
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.
www.it-ebooks.info
Matt is also responsible for http://adaptive-images.com—an early attempt to
deal with the problem of image file size in a newly responsive world. He's grateful to
Ben for being invited to preview this fine book (and he hopes you enjoy it as much as
he has!), and for the kind words about Adaptive Images in Ben's previous book.
I'd like to thank the countless people who've given me opportunities,
been inspirations, teachers, sounding-boards, and friends; I won't
list names because that's just boring and irrelevant for anyone else.
Some of you know who you are, others may not. If I've argued
passionately with you about some minutiae of nerdy stuff, you're
likely on the list.
I believe in the power of the Web and those who make it: in
making and sharing for the sake of betterment; in creating amazing,
passionate, and empathetic communities; and in improving the
human condition through it all. High-five people of the Web;
including you dear reader, for reading this book and learning
more. You rock.
www.it-ebooks.info
www.PacktPub.com
Support files, eBooks, discount offers
and more
You might want to visit www.PacktPub.com for support files and downloads related to your
book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub
files available? You can upgrade to the eBook version at www.PacktPub.com and as a print
book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
[email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a
range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
TM
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book
library. Here, you can access, read and search across Packt's entire library of books.
Why Subscribe?
• Fully searchable across every book published by Packt
• Copy and paste, print and bookmark content
• On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib
today and view nine entirely free books. Simply use your login credentials for immediate access.
www.it-ebooks.info
