Successfully reported this slideshow.

Sass Introduction

1,589 views

Published on

An introduction to Sass presented at Jive Software.

Published in: Technology, Education
  • Be the first to comment

Sass Introduction

  1. 1. Maintainable CSS with SASS & Compass Thomas Reynolds tdreyno@gmail.com http://awardwinningfjords.com http://twitter.com/tdreyno
  2. 2. What is SASS? • A preprocessor that outputs CSS • Whitespace-aware and nested • Variables & math • Macros & library and file includes
  3. 3. SASS compilation Before After • Selectors generated from nesting • Variable output formats: nested (shown), compact (no whitespace) and more.
  4. 4. Variables & Math • All math is unit-aware. • 12px + 12px = 24px • 2em - 1em = 1em
  5. 5. Macros Before After • Functions w/ params which generate CSS • Can be injected at any tab-level, for example: underneath #header or #footer
  6. 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. 7. How it’s used at Jive Before After
  8. 8. Questions?

×