Question

I’m digging into the world of CSS and I’m having some difficulties understanding the use of everything that exists.

There is LESS, SASS, Compass, Blueprint, HAML, etc. Which ones should I use together? Can someone explain what goes with each other?

Answer 1

LESS and SASS are server-side CSS generation frameworks — they allow you to create stylesheets using syntax that is close to CSS, but allows you to use items like variables and functions. Compiling these files will then generate a CSS file that you use. An important thing to note here is that SASS is only available for Ruby.

HAML is another item that is only available for Ruby, but doesn’t do CSS. It’s actually an alternate to creating ERBs (a Ruby partial view).

Compass is a library that is added on top of the SASS framework, allowing a bit more functionality and several default classes / styles.

Blueprint is another library that is basically a CSS file with preset classes, allowing for common use-cases like creating multi-column layouts.

However, none of these are needed to write CSS, and for the most part, aren’t even good enough to really look into yet. While I love the functionality of SASS, it’s really not for everyone, and ends up creating more bloated CSS than necessary.

If you’re just starting to experiment with CSS, I would recommend resources like Transcending CSS and Hardboiled Web Design by Andy Clarke. HTML5 for Web Designers and CSS3 for Web Designers are also both pretty good resources. A good understanding of HTML markup and semantics are also important for taking advantage of CSS and using it correctly.