Sass Reference - - By Hugo Giraudel

Compass

There has always been a lot of confusion around Compass. Actually, the bundle ā€œSass and Compassā€ has been so frequently used that some people assumed that Compass was a mandatory part of Sass. It is not.

Compass is a framework for Sass. To put it simply, Compass is a collection of tools to help write Sass code, especially on large projects. It was created and is maintained by Chris Eppstein, one of the Sass core designers. Needless to say it pairs very well with Sass, completing it somehow perfectly.

Letā€™s note that Compass, being partially written in Ruby, is not compatible with LibSass, the C/C++ version of Sass. There are no plans of porting it to LibSass as-is though; at some point, Eyeglass and its modules will simply take over by implementing all of the features from Compass one by one.

Speaking of features, here is roughly what Compass provides out of the box:

  • A collection of mixins to add automatic vendor prefixes to properties and values.
  • Some typography helpers, including a handy system to manage vertical rhythm.
  • A sprite builder to combine a folder of image files into a single one.
  • Styling helpers providing basic styles for the usual components (lists, tables, linksā€¦).
  • A couple of helpers to deal with print-specific stylesheets.
  • A lot of extra Sass functions to extend core functionalities, such as color, math, assets management helpers.
  • Some CLI tools to make it slightly easier to deal with Sass from the command line.

Needless to say that all modules are highly customizable directly from stylesheets through variables and functions. Two extra modules can also be imported if needed:

  • layouting helpers;
  • a reset stylesheet.

Installing Compass

Installing Compass is as easy as installing Sass. It is nothing more but a Ruby gem:

$ gem update --system
$ gem install compass

To install the next version (beta for instance) of Compass:

$ gem install compass --pre

Then, to be able to use Compass in a project, we need to import its stylesheets:

@import "compass";

It is also possible to include specific part of Compass only:

@import "compass/css3";