How to use compass with rails 3.1

Question

I have searched and searched and all I could see was that to use compass with rails 3.1 was to just edit the Gemfile like so:

gem 'compass', :git => 'https://github.com/chriseppstein/compass.git', :branch => 'rails31'
gem 'sass-rails', "~> 3.1.0.rc"

Yes I understand that but what next? Every tutorial I saw said just that, use that certain fork. But I am still having trouble with using compass with rails 3.1.

I did this:

$ compass init rails . --syntax sass
  directory ./app/stylesheets/ 
  create ./config/compass.rb 
  create ./app/stylesheets/screen.sass 
  create ./app/stylesheets/print.sass 
  create ./app/stylesheets/ie.sass

And since 3.1 was using assets now, I just transferred all those files to 3.1. Also, I am using compass-960 plugin, so where do I require it? I tried adding a compass.rb with require 960 and require html5-boilerplate and I still keep getting errors:

Error compiling asset application.css:
NoMethodError: undefined method `Error' for Compass:Module
  (in /Users/eumir/rails_apps/kiseki/app/assets/stylesheets/screen.sass)

NoMethodError (undefined method `Error' for Compass:Module
(in /Users/eumir/rails_apps/kiseki/app/assets/stylesheets/screen.sass)):

I tried doing compass compile and it gave me this:

$ compass compile Nothing to compile. If you're trying to start a new project, you have left off the directory argument. Run "compass -h" to get help.

As I said, I already edited my compass.rb so I am still stumped as to how to go about with this. Any help?

Answer 1

UPDATE: Seems like there is a better way !
Source: http://spin.atomicobject.com/2011/07/12/sass-sprockets-compass-with-rails-3-1/

UPDATE 2(dec 2, 2011): Chris Eppstein, creator of Compass posted this Github Gist of how to integrate Compass with Rails 3.1: https://gist.github.com/1184843

I now prefer this method over mine, as I noticed a great speed improvement at compilation time when using livereload.

---

MY METHOD:
(I now consider it deprecated, but maybe it can be useful in some cases, so here it is for reference:)

First, in your Gemfile, add:

gem "compass", "~> 0.12.alpha.0"

And don’t forget to execute a

bundle update

Then, in config/application.rb:

config.generators.stylesheet_engine = :sass

Rename application.css.scss to application.css.sass, or create it, and replace its contents by:

@import compass
@import _blueprint

(If you want to keep the new Rails 3.1 manifest code at the beginning of the stylesheet, you’ll have to replace the ‘/* */’ comments by the sass-syntax version ‘//’ at the beginning of each line)

Now, to test if compass and blueprint mixins work, add some code to the same file application.css.sass:

@import compass
@import _blueprint
body
  background: black
  +linear-gradient(color-stops(white, black))
  +column(5)

Run your rails server with

bundle exec rails server

Load your app in a browser, and visit http://localhost:3000/assets/application.css

If everything went well, you should see the compiled code.

Source:

http://blog.pixarea.com/2011/07/using-compass-blueprint-semantic-and-sass-syntax-in-rails-3-1/

Answer 2

The solutions in the other answers are deprecated with the latest version of Compass, v0.12, which requires an adapter to work with a rails app. The Compass author, Chris Eppstein, has put installation instructions on github:
https://github.com/compass/compass-rails

This adapter supports rails versions 2.3 and greater

Answer 3

Peter Gumeson from the compass users groups pointed me to a fix for this:

https://groups.google.com/forum/#!msg/compass-users/mU5HBt8TCIg/2Rt7iSESTSAJ

Here's his message:

Hi gang. This github issue might help out. https://github.com/sporkd/compass-html5-boilerplate/issues/19

I am pretty much running everything on edge right now. So my gemfile looks something like this:

gem 'rails',     :git => 'git://github.com/rails/rails.git'
gem 'sass-rails', '~> 3.1.0.rc2'
gem 'haml', :git => 'git://github.com/nex3/haml.git'
gem 'haml-rails'
gem "compass", :git => "git://github.com/chriseppstein/compass.git", :tag => "0.12.alpha.0"
gem 'compass-html5', :git => 'git://github.com/sporkd/compass-html5.git'

I'm working on the rails generators right now, so it should not be too far off. But this should at least get you going.

Peter

*changed branches as said by choonkeat

Answer 4

YOu can download the compass directory, dump it in vendor/assets/stylesheets so your directory structure is vendor/assets/stylesheets/compass Then from your main application stylesheets include the compass mixins ass required @include compass/reset;