Sass and Compass in Action
Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, and Brandon Mathis
  • July 2013
  • ISBN 9781617290145
  • 240 pages
  • printed in black & white

Salient commentary from the creators of Sass and Compass … a must-read!

David A. Mosher, DAVEMO Consulting

Sass and Compass in Action is the definitive guide to stylesheet authoring using these two revolutionary tools. Written for both designers and developers, this book demonstrates the power of both Sass and Compass through a series of examples that address common pain points associated with traditional stylesheet authoring. The book begins with simple topics such as CSS resets and moves on to more involved topics such as grid frameworks and CSS3 vendor implementation differences.

Table of Contents show full



about this book

about the authors

about the cover illustration

Part 1 Getting acquainted with Sass and Compass

1. Chapter 1 Sass and Compass make stylesheets fun again

1.1. Getting started with Sass

1.2. Hello Sass: DRYing up your stylesheets

1.3. What is Compass?

1.4. Create a Compass project

1.5. Solve real-world CSS problems with Compass

1.6. Summary

2. Chapter 2 Basic Sass syntax

2.1. Working with variables

2.2. Nesting CSS rules

2.3. Importing Sass files

2.4. Silent comments

2.5. Introducing mixins

2.6. Trimming CSS with selector inheritance

2.7. Summary

Part 2 Using Sass and Compass in practice

3. Chapter 3 CSS grids without the math

3.1. What is a grid?

3.2. Getting started with grids

3.3. Using Blueprint

3.4. Using

3.5. Vertical rhythm with Compass

3.6. Summary

4. Chapter 4 Eliminate the mundane using Compass

4.1. A better blank slate with targeted resets

4.2. Utilities for faster, better-looking typography

4.3. Layout helpers

4.4. Summary

5. Chapter 5 CSS3 with Compass

5.1. What is CSS3?

5.2. Using CSS3 with Compass

5.3. Support for Internet Explorer with CSS PIE

5.4. Summary

Part 3 Tuning for production

6. Chapter 6 Spriting

6.1. How do CSS sprites work?

6.2. Why is spriting necessary?

6.3. Spriting with Compass

6.4. Configuring Compass sprites

6.5. Mastering the magic with sprite helpers

6.6. Summary

7. Chapter 7 From prototype to production

7.1. Abstracting URLs

7.2. Prototyping with Sass and Compass

7.3. Deploying to production

7.4. Summary

8. Chapter 8 High-performance stylesheets

8.1. Measuring client-side performance

8.2. Avoiding HTTP requests with server-side @import

8.3. Reducing transfer time with compression

8.4. Speeding up page loads with asset hosts

8.5. Inline data URIs

8.6. Selector performance

8.7. Summary

Part 4 Advanced Sass and Compass

9. Chapter 9 Scripting with Sass

9.1. Using expressions

9.2. Understanding data types

9.3. Functions

9.4. Using expressions in selectors and property names

9.5. Control directives

9.6. Summary

10. Chapter 10 Creating and sharing a Compass extension

10.1. Sharing and reusing stylesheets

10.2. A simple extension

10.3. Creating an extension demo project

10.4. Writing an advanced extension

10.5. Creating a template

10.6. Distributing extensions

10.7. Summary

Appendix A: Installing Sass and Compass

Appendix B: Getting started with Compass

Appendix C: The Sass syntaxes


© 2014 Manning Publications Co.

About the Technology

Sass is an extension of CSS3, adding language features for creating well-formatted, standard CSS using the command line tool or a web-framework plugin. Compass is a framework that sits atop Sass and tackles common stylesheet problems such as grid layouts, handling CSS3 vendor differences, and production environment stylesheet optimization. Together, they do for CSS what jQuery has done for JavaScript: solve real world problems, letting designers and developers create stylesheets more efficiently.

About the book

For 15 years, we've been using CSS to patiently paint the web by hand. No more! Sass and Compass add scripting and a library of components to standard CSS so you can simplify stylesheet authoring, automate tedious tasks, and add dynamic styling features to your pages. Think of Sass and Compass as power tools that allow you to paint with remarkable speed and precision.

Sass and Compass in Action is a hands-on guide to stylesheet authoring using these two revolutionary tools. This practical book shows you how to eliminate common CSS pain points and concentrate on making your pages pop. You'll begin with simple topics like CSS resets and then progress to more substantial challenges like building a personal stylesheet framework to bundle and reuse your own approaches and opinions.

What's inside

  • CSS for desktop and mobile web apps
  • Loaded with examples and reusable techniques
  • Authors are Sass and Compass creators and core team members

About the authors

Wynn Netherland is a full stack web developer who cohosts The Changelog Podcast. Chris Eppstein is the creator of Compass and a member of the Sass core team. Brandon Mathis is a passionate professional web designer with deep Sass skills. Nathan Weizenbaum is the creator and lead developer of Sass.

combo $44.99 pBook + eBook
eBook $35.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks

An excellent reference for learning Sass and Compass.

Kevin Sylvestre, Pose

Learn from the people who transformed CSS into something fun!

Jeroen van Dijk, ADGOJI

Takes your understanding of Compass and Sass to the next level.

James Hafner, Rocket Mobile

Excellent real-world examples.

Jacob Rohde, Amino