Configure Compass within a CakePHP project

Question

I've been looking into Compass and the more I look, the more it feels like the way that CSS should be written. As a test case, I'd like to use it in one of my CakePHP projects. Unfortunately, I'm having some trouble with the initial configuration. Specifically, with getting the resources in the right place and referenced properly in the compiled CSS.

I'm creating a :stand_alone project in my /app directory. Well, that's what I want to do. Compass doesn't seem to like that. In creating the project, I've told it where to put the css, images and js and those resources do, in fact, make it to the proper directory. Unfortunately, because I'm not creating the directory in the webroot, the resources are being referenced incorrectly when compiled.

I'm creating the Compass project in my CakePHP app/ directory with this command:

$ compass -f blueprint --sass-dir sass --css-dir webroot/css/ --images-dir webroot/img/ --javascripts-dir webroot/js/ --output-style compact .

The compiled CSS, though, wants to reference Blueprint's showgrid.png image as:

url('/webroot/img/grid.png?1264969358')

I suppose this is a pretty predictable result, but I can't figure out how to get the compiled CSS to reference the correct /img/grid.png?whatever path. Is that even possible? Am I forced to create my Compass project directly in my webroot?

Thanks.

UPDATE

Content of my config.rb file:

# Require any additional compass plugins here.
project_type = :stand_alone
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "webroot/css"
sass_dir = "sass"
images_dir = "webroot/img"
http_images_path = "/img"
javascripts_dir = "webroot/js"
output_style = :compact

Answer 1

Rails and other frameworks have the sass files and configuration in the project root, outside the public webroot. A stand-alone project should work fine this way too.

Are you using image_url() for when you're referencing an image?

In your compass.config file you can set the http_images_path if it's different from your directory path. See the configuration page in the wiki for more details.

Answer 2

Running Compass v0.10 and using the following configuration:

# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
sass_dir = "sass"
css_dir = "webroot/css"
images_dir = "webroot/images"
javascripts_dir = "webroot/js"
http_stylesheets_dir = "css"
http_javascripts_dir = 'js'
http_images_dir = 'images'
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

provides the expected results.

Compass v0.10 is just about to be release, you can install it with:

(sudo) gem install compass --pre

To create a project using this config:

1. Create a project directory
2. Save the config into config.rb in the project directory.
3. From within your project directory run the command: compass install blueprint