SXSW2012: Simplify CSS Development with Sass & Compass

Simplify and speed up your CSS development with Sass. Overcome browser differences – particularly with CSS3 – and build grids the right way with Compass. Sass is a CSS meta language that brings more functional programming to the css language and complies to standard browser supported CSS. It adds tools like variables, functions, and mixins, as well as compilation tools for debugging and optimization. Compass builds an additional framework of tools on top of Sass. It adds mixins for almost all the new CSS3 modules to abstract away syntax inconsistencies and browser prefixes. It also enables the development of CSS frameworks *the right way*, using semantic classes instead of presentation oriented classes. Compass has ports Frameworks like Blueprint, YUI,, as well as even some Compass only ones like Susy. On top of that, there are also loads of extensions to Compass for everything from CSS3 button generators to more complex sprite and image generators.

Alex Lemanski

The Basics

  • Able to set a font color once and then when you need to make a change you just change the variable.
  • Nesting Selectors
  • Parent References
  • Nesting Statements
  • Comments: Standard comments will show up in the CSS, Sass Comments will not show up.


Good Practices

  • Don’t nest more than four selectors deep
  • break things down as much as possible
  • Work from the main are of content or interaction and move out

Working with multiple files

  • _lib directory to store partials
  • @import “lib/nav”;
  • @import “nav”;

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins