Rails 3 + HAML, SASS, Blueprint and Compass

For my latest project I’ve decided to take the plunge with Rails 3. Some of the gotchas I encountered included rails server vs. script/server and the new gemfile.

First, add the Haml and Compass gems in the gemfile in the root of your project:

gem 'haml'
gem "compass", ">= 0.10.5"

Next install the gems. Haml includes sass at default and compass will take care of installing blueprint.

bundle install

Then setup compass with blueprint.

compass init rails . --using blueprint

If you recieve a compass: command not found then like me you may not have gem bin folder in your path. I corrected this by adding C:\Ruby192\lib\ruby\gems\1.9.1\bin to my path where Ruby192 is your install folder. This was on my Windows 7 system, so obviously YMMV.

Note that compass needs selection on 2 different options:

• Yes on the first option to store sass files in a stylesheets directory in the app directory.
• No on the second to compile css to a separate directory

I chose the recomended options for both and selected yes.

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
...
Congratulations! Your rails project has been configured to use Compass.
Just one more thing left to do: Register the compass gem.

In Rails 2.2 & 2.3, add the following to your environment.rb:

  config.gem "compass", :version => ">= 0.10.6"

In Rails 3, add the following to your Gemfile:

  gem "compass", ">= 0.10.6"

Then, make sure you restart your server.

Sass will automatically compile your stylesheets during the next
page request and keep them up to date when they change.

Next add these lines to the head of your layouts:

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

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

Sass will automatically compile your stylesheets during the next
page request and keep them up to date when they change.

Now you can convert your application template to haml

Rename application.html.erb to application.html.haml and change the contents to look something like:

!!!
%html
  %head
    %title
      App Name
    = stylesheet_link_tag 'compiled/screen.css', :media => 'screen, projection'
    = stylesheet_link_tag 'compiled/print.css', :media => 'print'
    /[if lt IE 8]
      = stylesheet_link_tag 'ie.css', :media => 'screen, projection'
    = stylesheet_link_tag :all
    = javascript_include_tag :defaults
    = csrf_meta_tag
  %body
    = yield

All going well your project should now be setup for haml, sass, blueprint and compass!