Getting Started

Please read the Compass Primer (but don’t follow the installation instructions on that page) and then come back here. The Primer 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 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. Haml/Sass 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

  sudo gem install compass

Updating Compass to the latest version

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

  sudo gem update 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...
  # If you create an index.html file (in project-name) using the sample in
  # the Compass Primer,  be sure to uncomment the "+blueprint" line in
  # file src/screen.sass so that a .container class gets defined.  Otherwise
  # you won't get any blueprint styling!  Also, as shown in the screencast above,
  # if your project directory is not the root of your web server, in index.html, change
  # <link href="/stylesheets... links to
  # <link href="stylesheets... to make them relative
  # Recompile:
  compass -u
  # use the css files in the stylesheets directory

Note, the blueprint (YUI and compass) framework files that screen.sass @imports are stored under your Ruby gems repository – someplace like /usr/local/lib/ruby/gems/1.9.1/gems/compass-0.8.17/frameworks/blueprint

Learn Sass

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

Syntax Highlighting

A complete list of Syntax Highlighting tools (old link) for Sass.

If you use TextMate, I recommend the Bundle by SeaOfClouds

Compass Source Code

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

• 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.