public
Description: Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.
Home | Edit | New

Merb Integration

Follow the Getting Started instructions to install Compass & Haml.

Add dependencies to config/dependencies.rb


  ...
  dependency "merb-haml", merb_gems_version
  dependency "chriseppstein-compass", :require_as => 'compass' 
  ...

Note that the merb-haml dependency must come before the compass dependency or the .sass load paths wont work correctly with compass.

Configure Compass

This step is optional, but highly recommended. Edit config/init.rb and add the following to the config block. The intention is to keep SASS files, which are really program files, separate from your custom CSS. Additionally this will put your generated CSS files in the compiled dir, which will ensure they don’t overwrite anything you have existing or create in the future.


  Merb::Config.use do |c|
    ...
    # Added to support the Compass SASS MetaFramework
    c[:compass] = {
      :stylesheets => 'app/stylesheets',
      :compiled_stylesheets => 'public/stylesheets/compiled'
    }
    ...
  end

If you do not do this step, your Sass stylesheets should go in the Sass default location: MERB_ROOT/public/stylesheets/sass/ and will be compiled into MERB_ROOT/public/stylesheets/

Create Stylesheets

Create your SASS stylesheets directory according to your choice from the previous step (if it does not exist):

mkdir MERB_ROOT/app/stylesheets

Add a SASS file to this dir. You may want to copy the master.sass out of the Compass Merb Sample App. This file recreates the master.css file which ships in a default Merb app but uses SASS and BluePrint instead of raw CSS. You can change or extend this as you please. You’ll know if you have everything working if you see the BluePrint logo on the Merb default page.

If you do copy the master.sass file into your app, we suggest removing the following file (assuming you have a backup) as it will no longer be needed:

public/stylesheets/master.css

Trouble Shooting

If you have any problems, a fully working merb application can be found here. You may want to download it and examine it for differences. If you are still having problems, feel free to ask for help on the mailing list

Last edited by scottmotte, Thu Jul 09 16:31:42 -0700 2009
Home | Edit | New
Versions: