My second book – Sass and Compass for designers

| 38 replies | Short URL: http://benfra.in/1zi

I’d like to tell you about my second book, ‘Sass and Compass for designers’.

Update: 25th April 2013 – the book is now available from Packt in ebook formats and from Amazon in Kindle format and hard copy.

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?

If you’re not sure what Sass and Compass can do for you, take a look at the Chapter summaries below for a taster.

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.

In a nutshell, if my book has one aim, it’s to make using Sass and Compass easier for ‘designers’ – those that are happy editing HTML and CSS but perhaps don’t have any experience with JavaScript or programming languages. If you can write and edit HTML and CSS, you can totally understand Sass and Compass and use it to improve your workflow.

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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!

Profit share

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).

Tech Editors

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 Eden

More about Dan: (twitter: http://twitter.com/_dte) (web: http://daneden.me)

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.

Head over to Dan’s site. There are links there so you can hear him on podcasts, read about his process, and find out about the magazines he has been featured in.

Matt Mitchell

More about Matt Mitchell: (twitter: http://twitter.com/_m_d_m) (web: http://mattmitchell.co.uk)

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!

Matt Wilcox

More about Matt Wilcox: (twitter: http://twitter.com/MattWilcox) (web: http://mattwilcox.net)

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’.

Availability The book was released in April 2013. You can order:

Packt

Amazon US

Amazon UK

It’s also available at all other quality book stores.

I really hope you enjoy the book and as ever, look forward to hearing your thoughts.

About The Author

38 Responses to “My second book – Sass and Compass for designers”

  1. Gour

    Hello,

    I’ve now settled to use Textpattern CMS for my web needs and would like to ‘convert’ my old sites to responsive design.

    Considering that I plan to use YAML CSS framework or Foundation (using Sass/Compass), which book would be more appropariate for me: the upcoming one or the ‘old’ one or both?

    I did learn about HTML/CSS, but need some refresher considering CSS2 was the last I used.

  2. Ben Frain

    If I had to recommend one based on that info I would say the responsive one would be better for you as it deals with converting existing designs to responsive but you’ll find the second very much a companion book to the first. Just allows you to do everything so much easier. Does that help?

  3. Gour

    Hiya Ben,

    > Does that help?

    Yes. Thank you for reply.

    I might buy both in ebook version seeing Packt offers some discount in this case. :-)

  4. Gour

    I read whatever reviews I could find about your 2st book and looked at some of your blog posts, so it is obvious you know how to teach people.

    Otoh, since I do consider YAML and/or Foundation frameworks and seeing you use Susy and mentioned Zen and Salsa I just wonder if you’re somewhat familiarr with YAML and Foundation, what do you think about ‘em and whether you can recommend ‘em to someone starting to do real web design?

    Do you believe that your 2nd book won’t slip May’ schedule?

  5. Ben Frain

    Hi,

    It won’t slip past May. Actually hoping to get it out during April. :)

    I’ve used Foundation. It’s very similar to Twitter Bootstrap and has some useful things in there but I always tend to ‘roll my own’ rather than use frontend frameworks. But that’s a preference thing.

    Just take a look and see what you think. Really just depends on your needs so it’s hard to be prescriptive, sorry!

  6. Gour

    I’m chatting in #compass where I’ve heard good things about Susy – important feature that it falls into category of ‘semantic’ ones in comparison with the Foundation and considering you’re tackling it in your book is another pro point.

    When I bought Packt book about Concrete5, there was access to available chapters before official release. Is it same with your book?

    In that case we might order both *today*. :-)

  7. Ben Frain

    Hi Gour, Susy now has an isolate-grid mixin (as of 1.0.6) so can essentially do everything it did before as well as container relative floats (what Zen does do negate pixel rounding issues). I’ll be updating that post as soon as I get chance to update the info.

    In answer to your question, I still think Susy is the best tool for the job. :)

  8. Ben Frain

    Hi Jankerli,

    Afraid I’m not sure. I suppose it depends how popular it is as to whether it gets translated but like my first book – I have no control or say in the translation. I hope they suffer translation well but I have no idea.

    Thanks for the interest.

  9. Gour

    > In answer to your question, I still think Susy is the best tool for the job.

    Thank you for your reply.

    Can you post some info or maybe it will be included in your 2nd book which 3rd parts add-ons (e.g. UI elements, like buttons, navigation) you use along with Susy to cover (missing) stuff (from Compass/Susy) which is usually included in monolithic frameworks (like Foundation)?

  10. Gour

    While waiting for your book, I did some courses at CodeSchool to brush my HTML/CSS skills a bit, but after finishing 8 of them, today I placed order for both your books, so wonder whether Sass/Compass is still scheduled for the April?

  11. Gour

    > Hi Gour, yes, it’s at the printers so it will be available before the month is out.

    Great!!

  12. Ben Frain

    Thanks Robin, and thanks for all your help getting me started with this book writing fiasco. :)

  13. Gour

    Despite what is stated in the update, here the Download is not enabled for my pre-order?

    18 Apr 13 1 x Sass and Compass for Designers [eBook] £16.99 Pre-Order 25 Apr 2013

  14. Benjamin Frain

    Hi Gour,

    Can you check again?

    I’ve just asked the publishers and there should not be a problem. I suggest you email them directly if you are still unable to download it.

    Thanks and hope you enjoy it (when you get it)!

  15. gour

    > Can you check again?

    I did, but nothing. :-(

    Maybe they are angry with me ’cause I sent them negative feedback about Responsive Web Design by Example book (which, btw. recommends your 1st book) where the font used for code snippets looks horrible on all Linux pdf viewers I’ve tried (evince, epdfview, xpdf…)

    > I’ve just asked the publishers and there should not be a problem. I suggest you email them directly if you are still unable to download it.

    I’ve sent email to them…

  16. Ben Frain

    Hi Gour,

    I’m sure it’s nothing personal – just some issue getting the order released but do let me know how you get on as it’s pretty disappointing for me too knowing that someone who wants to read your work, has paid to do so and can’t!

  17. Gour

    > I’m sure it’s nothing personal – just some issue getting the order released…

    I was joking about them being angry on me…the issue is cleared as of today – ‘technical error’ in processing my order.

    However, I’ll start grokking your 1st book 1st ’cause didn’t have enough time before. ;)

  18. Gour

    Hiya Ben,

    I’m working on your 1st book and skimmed throught the 2nd one…seeing the chapter about using Susy for the grid and considering there are some plugins to style e.g. buttons, but wanting to avoid using monolithic frameworks like Foundation, I wonder if you have any hint for styling forms when using Sass+Compass?

  19. Chris

    Really enjoyed your book on SASS and Compass. Currently re-reading and trying things out.

    I have a question on your media query mixing. You do some maths there with ems, e.g.: a) XS (min-width: $XS) and (max-width: $S – 1) … b) S (min-width: $S) and (max-width: $M -1 ).

    With XS defined as 18 em, S as 30 em and M as 43em a) results in an area of 18 to 29 em and b) in an area of 30em to 42 em. What’s with the space between 29em and 30em? The maths doesn’t seem to cover that area, 1 em that is, which is 16px. When you resize browser windows this looks like an issue? Or am I on the wrong path here?

  20. Ben Frain

    Hi Chris,

    You’re quite right, if you need to cover off the minor gaps between the two you you can simply amend the mixin like this:

    @media only screen (min-width: $XS) and (max-width: $S - .01) { @content }

    Adding the -.01 instead of -1 is the key.

    It’s not something I have found to be a major problem as I tend to have breakpoints at arbitrary positions depending upon the design (rather than popular iPhone, iPad style breakpoints) but I’ll definitely add a note about this if I get to do a second edition.

    Thanks, Ben

  21. Chris

    Thanks for the quick reply (wow!). “- .01″ is exactly what I was looking for. Just tested it. Works like a charm.

    Interestingly when you omit the space between the minus sign and the dot like so “-.01″ the calculation does not work. The space is important.
    Is there a specification for things like “- .01″? Or did you find it by trial?

    I agree that it should be included in a second edition (I am 100% sure there will be one), all the more since your example uses “ems” here. Thanks, Ben, very much appreciated!

  22. Ben Frain

    Hi Chris, sorry I typed that prior reply on my phone and hence the space problem! It needs the space so that Sass can determine its a calculation and not a string (you could maybe wrap in brackets too to delimit but not tried that).

    It’s basically just telling the browser to sub-divide the em/rem so that you get a more similar correlation to pixels (which is what the browser ultimately paints to the screen).

  23. Chris

    Working on a Drupal site with a Zen sub theme, I ditched zen-grids for susy. I have been playing around with Susy and it works nicely. But here is my question. I have a layout with two main columns: #content (holding the main content; a grid of three rows of four images with a width of 181px) and div.region-sidebar-second (holding the main navigation). My designer came up with a 960px layout, where the #content container’s width is 750px then there is a 8px margin and div.region-sidebar-second has 202px.

    In my responsive.scss I put:
    .sidebar-second {
    #content {
    @include span-columns(9, 12);
    }
    .region-sidebar-second {
    @include span-columns(3 omega, 12);
    }
    }
    So #content uses the first 9 columns and .region-sidebar-second uses the last 3 columns. But this does not translate to 750px/8px/202px. The percentages that susy calculates are right, of course, but for my layout I would Susy calculate different percentages.
    E.g. Susy calculates for #content
    .sidebar-second #content {
    float: left;
    margin-right: 1.40845%;
    width: 74.6479%;
    }
    and for .sidebar-second .region-sidebar-second {
    float: right;
    margin-right: 0;
    width: 23.9437%;
    }

    In order to meet the design I would need a width: 78.125% for #content, .833333 for margin-right and a width: 21.0416666 for .region-sidebar-second

    Not sure whether this can be achieved with Susy. If you have a quick idea this would be very much appreciated. Or should I post this on stack overflow? Just let me know. Thanks.

  24. Ben Frain

    Chris, I’m going to be off the grid (with only phone anyway) for next 10 days so if you need an answer fast I’d try Stack or the Susy GitHub repo.

    I’m happy to take a look when I’m back at my computer if you haven’t got it sorted by then.

  25. Chris

    Ben, thanks for the reply. I’ll have a go at Stack and will post the answere here. No rush, enjoy your time away from the desktop!

  26. Chris

    When the design is “arbitrary”, then Susy Grids just don’t work properly. For my design to work (you can see it here: http://www.spaceweather.com), I had to configure Susy like so:
    $total-columns : 28;
    $column-width : 2.25em;
    $gutter-width : .5em;
    $grid-padding : 0em;

    But then my #content section still didn’t fit. Thus I had to adjust the main content area (i.e. #content) like this:
    #content {
    width: 78.125%;
    }

    It works but I don’t think I was able to use Susy to its full potential.

  27. Ben Frain

    Hi Chris,

    It’s a little difficult to gauge how you have set things up, Susy wise, from your CSS. However, I always get best results with Susy when I’m working with designs that have considered the relationships (in the proportional sense) between areas from the outset. Did you try setting a new Susy grid context for that main area? Thus making it a grid within the grid?

    It’s certainly true that they don’t suit every project, I’m working on a re-design of this site at present and because I’m not a good designer and making it up in the browser as I go along I’ve not used a grid. As such I haven’t used Susy to build it out. However, that’s probably not a good thing – you can judge for yourself in a month or so ;)

  28. Chris

    Sorry for my late reply. The notification didn’t work. I experimented a lot with Susy on that project but ended up not using a grid within a grid. As the designer didn’t have a grid system in mind when designing, I think, I couldn’t pull all the power of Susy. I think it worked out well enough. The client didn’t want to pay for a responsive round up, but the site also works fine on mobile devices (I pulled the right sidebar to the bottom on small screen widths.)
    Looking forward to the new design of your website!

  29. Randy

    As an old front-end part-time web designer who started out writing html / css with text editor in 1999 and hasn’t really looked at code since 2007. I am interested in both your books. What would you consider as best order and way to tackle both books for a new start up site?

    Should I learn sass first before doing any css? or just go for a straight html5/css3 responsive site?

    Thanks randy

  30. Ben Frain

    Hi Randy, I’d read the responsive one first as that covers lots of ground. Then, if you are still awake grab the second ;) if you get the ebooks from Packt and use coupon code ‘benfrainsentme’ you’ll get 35% off ;)

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.

490Days
490 days since this post was last revised. Specific details are likely out of date.
1873 words
MENU