Chapter 1. Sass and Compass make stylesheets fun again


This chapter covers

  • Getting started with Sass and dynamic stylesheets
  • Writing stylesheets more efficiently with Sass features
  • A quick introduction to Compass
  • Compass solutions to real-world stylesheet challenges

Sass is an extension of CSS3 that helps you create better stylesheets with less effort. Sass frees you from repetition and gives you tools to be creative. Since you can implement changes much faster, you’ll be free to take risks in your designs. Your stylesheets will be able to keep pace with changing colors and changing HTML markup, all the while producing standards-based CSS you can use in any environment. The Sass processor is written in Ruby, but unless you want to hack the language itself, you need not care.

Throughout this book, we speak to two sets of readers, hoping to find some common ground with each camp. If you find yourself in both groups, even better.

To our web designer friends: You have all the Adobe app keyboard shortcuts memorized. You choose complementary colors based on RGB values alone. You may or may not sport a pair of dark-rimmed glasses, but chances are you start your day with coffee or tea and the latest from Smashing Magazine. By your own admission, you know enough jQuery to be dangerous and don’t know why your developer friends chuckle when you talk about CSS as a language.

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