Getting Started

Please read the Compass Primer and then come back here. It goes over how to install and walks you through some basic editing tasks in a stand alone environment.

Important Note

Compass is using some very new features of Sass. You must install the haml 2.2 or later to run Compass.

Install Dependencies

1. Ruby – How to install Ruby is outside the scope of this document. But it’s really easy so don’t let not having it deter you.
2. Sass – Sass is part of the Ruby-based project called Haml. It will be installed as a dependency of compass automatically during the next step.
3. RubyGems – You need to have a fairly recent version of rubygems installed. Please upgrade to 1.3 or greater: sudo gem update --system

Install Compass

  gem sources --add http://gems.github.com/
  sudo gem install chriseppstein-compass

Updating Compass to the latest version

If you’ve already installed compass previously, this will update compass for you.

  sudo gem update chriseppstein-compass 

Create your Project

If you’re using one of the following application technologies please read the respective pages (sorted alphabetically):

• Jekyll Integration
• Merb Integration
• nanoc Integration
• Ramaze Integration
• Ruby on Rails Integration
• Sinatra Integration
• Staticmatic Integration
• Webby Integration

If you’re using compass stand-alone:

  compass -f blueprint project-name
  cd project-name
  # ... edit your sass files in the src directory...
  compass -u
  # use the css files in the stylesheets directory

Learn Sass

If you don’t yet know Sass, please take the time to read through the documentation.

Also note that you may find it bewildering to get started without reading the Compass source code. Reading the source code will help you

• Some of the included frameworks
• Template code for each framework
• Which mixins are available for you to use for a given framework
• What each mixin does in CSS.

Check the source out someplace memorable ….

cd ~/Desktop
git clone git://github.com/chriseppstein/compass.git

… and keep it handy as a reference.

Syntax Highlighting

A complete list of Syntax Highlighting tools for Sass.

If you use TextMate, I recommend the Bundle by SeaOfClouds