Maintainable CSS with
SASS & Compass
Thomas Reynolds
tdreyno@gmail.com
http://awardwinningfjords.com
http://twitter.com/tdreyno

What is SASS?
• A preprocessor that outputs CSS
• Whitespace-aware and nested
• Variables & math
• Macros & library and file includes

SASS compilation
Before After
• Selectors generated from nesting
• Variable output formats: nested (shown),
compact (no whitespace) and more.

Variables & Math
• All math is unit-aware.
• 12px + 12px = 24px
• 2em - 1em = 1em

Macros
Before After
• Functions w/ params which generate CSS
• Can be injected at any tab-level, for
example: underneath #header or #footer

What is Compass?
• Compass has two components
1. Continuous-compilation of Sass files
2. A macro library including Sass-
implementations of Blueprint,YUI grids,
960.gs and other helpers (clearfix, etc)

How it’s used at Jive
Before After

Questions?