Chapter 4. Eliminate the mundane using Compass

 

This chapter covers

  • Using Compass to reset default browser styles
  • Compass helpers for better typography in your stylesheets
  • Using Compass to create sticky footers, style tables, and floats

Now that we’ve taken a first pass at Sass syntax and looked at how Compass fits into your stylesheet workflow, let’s dive deeper. In this chapter, we’ll look at some everyday easy, yet mundane (read: not fun), tasks and how Compass can save you time and effort while taking advantage of community-vetted approaches. If you haven’t made the jump to dynamic stylesheets and are still writing CSS by hand, you know that certain stylesheet tasks seem like death by a thousand paper cuts. Things like providing a CSS reset, styling list elements into horizontal navigation, setting link colors, and swapping headline text with images can get repetitive with each new project. In this chapter, we’ll show you some helpers Compass provides to make these tasks quicker, easier, and more adaptive to your project.

4.1. A better blank slate with targeted resets

In chapter 1, we looked at CSS resets and how just by adding @import "compass/reset" to your Compass project, you can take advantage of Eric Meyer’s Reset v2.0. Though convenient, there are times when a such a global reset can be heavy-handed. Fortunately, Compass offers more fine-grained approaches. To determine which approach to use, it’s important to contrast the global and à la carte reset options.

4.2. Utilities for faster, better-looking typography

4.3. Layout helpers

4.4. Summary