small medium large xlarge

Pragmatic Guide to Sass


Cover image for Pragmatic Guide to Sass

Pragmatic Guide to Sass


CSS is fundamental to the web, but it’s a basic language and lacks many features. Sass is just like CSS, but with a whole lot of extra power so you can get more done, more quickly. Build better web pages today with Pragmatic Guide to Sass. These concise, easy-to-digest tips and techniques are the shortcuts experienced CSS developers need to start developing in Sass today.

Customer Reviews

Packed with plenty of code examples, this is a primer that shouldn’t be missed.

- Midwest Book Review

Pragmatic Guide to Sass is a snappy little book that effectively hits you with
the right dose of Sass magic to either pick up Sass as a newcomer or give
you a refresher if you’re already using it. The guide is written in a style
that’s both a tutorial and a reference at the same time, and it’ll be a handy
go-to book for anyone working with Sass, whether on a daily basis or only
on rare occasions. It gets two thumbs-up from me.

- Peter Cooper

Editor, "Ruby Inside" and "HTML5 Weekly"

Sass is the best way to write maintainable CSS. This Pragmatic guide will
get you up to speed on Sass’s most powerful features, including nesting,
variables, and mixins—an invaluable reference.

- Sam Stephenson

Creator of Sprockets and the Rails asset pipeline

Michael and Hampton, in Pragmatic Guide to Sass, have put together the
most comprehensive and thought-out guide to Sass to date. No matter
what server-side technology you use, Sass can be used in anyone’s development
stack to help organize your CSS. Pragmatic Guide to Sass shows
you the best practices in DRYing up your CSS with the power of Sass. It
teaches you how to become a CSS heavyweight without the bloated CSS.
This book should be on every web developer’s shelf (and e-reader).

- Andrew Chalkley

technical writer,

Chock-full of unexpected goodies such as extras on Compass and Haml,
Pragmatic Guide to Sass is hands-down the best Sass resource printed to
date—a must-read for web developers and smart designers.

- Dan Kissell


See All Reviews

About this Title

Pages: 128
Published: 2011-12-16
Release: P1.0 (2011-12-20)
ISBN: 978-1-93435-684-5

Written by Sass creator Hampton Catlin and Michael Lintorn Catlin, Pragmatic Guide to Sass shows you how to improve your CSS, from the basics to advanced topics, from first installation to sprucing up your buttons. You’ll see how to code the right way in Sass thanks to short, clear examples. Two-page spreads show the explanation on one side and code examples on the other. You’ll learn how to improve your pages in minutes.

You’ll be able to perform amazing feats of CSS including using variables, calculating layouts, and modifying colors. Did you ever want to make a color 10% less saturated? We’ll show you how to do that without needing a calculator.

Plus, learn about Compass, Sass’s library of carefully built hacks, reusable parts, and frameworks. Find out how to shortcut cross-browser issues and develop mixins for shortening text and making lists more exciting. You’ll wonder how you spent all those years styling sites without it!

Make things even easier with Blueprint, and discover how to use its predefined classes that you can apply to your Web site. From selector scoping to bundling, debugging, and designing custom functions, Pragmatic Guide to Sass will help you build the pages you’ve always wanted.

What You Need:
  • An installation of Sass and Compass
  • Some basic command line knowledge

What You Need

Sass 3.1 and above.

Contents & Extracts

Full Table of Contents

  • Acknowledgements
  • Welcome! excerpt
  • Part I — Basics
    • Task 1. Installing Sass
    • Task 2. Compiling Sass into CSS
    • Task 3. Using Sass with Rails
    • Task 4. Avoiding the Command Line: Using Scout
    • Task 5. Commenting
    • Task 6. Selector Scoping excerpt
    • Task 7. Going Further with Advanced Scoping
    • Task 8. Altering the CSS Output
    • Task 9. Defining Variables excerpt
    • Task 10. Calculating a Layout
    • Task 11. Creating Themes with Advanced Colors
    • Task 12. Importing
    • Task 13. Building a Font Family Library
    • Task 14. Resetting CSS
  • Part II — Advanced
    • Task 15. Keeping It Semantic: @extend excerpt
    • Task 16. Keeping Code Clean with Mixins
    • Task 17. Taking Mixins Further with Variables
    • Task 18. Debugging
    • Task 19. Generating Cross-Browser Rounded Borders
    • Task 20. Using Cross-Browser Opacity
    • Task 21. Interpolating excerpt
    • Task 22. Stop Repeating Yourself with @each
    • Task 23. Determining Conditions with @if
    • Task 24. Changing Looks with Nested @media
  • Part III — Compass
    • Task 25. Setting Up for a Compass Project
    • Task 26. Resetting: Much Easier with Compass
    • Task 27. Sprucing Up Your Lists
    • Task 28. Making Lists Horizontal
    • Task 29. Sticking a Footer to a Window excerpt
    • Task 30. Stopping Overflow with Clearfix
    • Task 31. Truncating Text Using Ellipses
    • Task 32. Stretching Elements
    • Task 33. Jazzing Up Layouts with Columns
    • Task 34. Spriting excerpt
  • Part IV — Blueprint CSS
    • Task 35. Producing More Two-Column Layouts
    • Task 36. Using Predefined Fancy Fonts
    • Task 37. Making Beautiful Buttons


Hampton Catlin is the inventor of Sass, a CSS generating language, and the Haml markup language. He is the original creator of Wikipedia Mobile ( and is also the creator of several successful iPhone applications including Dictionary!

Michael Lintorn Catlin is a Biologist and PhD dropout. He holds one masters from the University of Oxford in biochemistry and another masters from the University of Cambridge in developmental biology.