An introduction to Sass presented at Jive Software.

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

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

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

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

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

6. 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)

7. How it’s used at Jive
Before After

8. Questions?