Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Demonstrates how to configure a rails application to use Compass
Ruby JavaScript
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
app Update configuration to match the initial output from compass v0.10.
config update compass and haml to 0.10 and 2.2.16 respectively.
db Generate Post resource with scaffolding.
doc Bare rails install
script require rails 2.3, remove cache_template_extensions
test Generate Post resource with scaffolding.
.gitignore Ignore the tmp directory.
Rakefile Bare rails install


Compass Sample Application for Rails

From scratch you must do the following steps. From there, follow the commit history to see the changes that were made.

$ gem -v
# If less than version 1.3.5 upgrade it:
$ sudo gem update --system
$ gem install haml
$ gem install compass

Build the app:

$ rails compass-rails-sample-application
$ cd compass-rails-sample-application
$ haml --rails .
$ compass --rails -f blueprint .
Compass recommends that you keep your stylesheets in app/stylesheets
instead of the Sass default location of public/stylesheets/sass.
Is this OK? (Y/n) y

Compass recommends that you keep your compiled css in public/stylesheets/compiled/
instead the Sass default of public/stylesheets/.
However, if you're exclusively using Sass, then public/stylesheets/ is recommended.
Emit compiled stylesheets to public/stylesheets/compiled/? (Y/n) y
directory ./public/stylesheets/compiled/
directory ./app/stylesheets/
   create ./config/initializers/compass.rb
   create ./app/stylesheets/screen.sass
   create ./app/stylesheets/print.sass
   create ./app/stylesheets/ie.sass
   create ./public/images/grid.png

Congratulations! Your rails project has been configured to use Compass. Sass will automatically compile your stylesheets during the next page request and keep them up to date when they change. Make sure you restart your server!

Next add these lines to the head of your layouts:

  = stylesheet_link_tag 'compiled/screen.css', :media => 'screen, projection'
  = stylesheet_link_tag 'compiled/print.css', :media => 'print'
  /[if IE]
    = stylesheet_link_tag 'compiled/ie.css', :media => 'screen, projection'

(You are using haml, aren't you?)

Something went wrong with that request. Please try again.