Skip to content

Instantly share code, notes, and snippets.

@jamesarosen
Created December 15, 2011 17:22
Show Gist options
  • Save jamesarosen/1481953 to your computer and use it in GitHub Desktop.
Save jamesarosen/1481953 to your computer and use it in GitHub Desktop.
Compass + Multiple Images Directories

I have the following in my project:

  // in app/stylesheets/foo.scss:
  .foo {
    // foo.png is at app/images/foo.png
    background-image: image-url("foo.png");
  }

  // in vendor/stylesheets/bar.scss:
  .bar {
    // bar.png is at vendor/images/bar.png
    background-image: image-url("bar.png");
  }

If I try to compile both of those SCSS files, Compass will complain:

WARNING: 'foo.png' was not found (or cannot be read) in ./images WARNING: 'bar.png' was not found (or cannot be read) in ./images

The problem is that Compass assumes a single images_dir. There are a few solutions to this:

  1. I set images_dir to . and use the relative paths (e.g. image-url("app/images/foo.png") in my stylesheets. That works great for my stylesheets, but it means I have to edit things in vendor to suit the structure of my application. Not nice.
  2. I change Compass to support multiple image_dirs. This is certainly possible. I imagine they would work like load paths, so I could put images_dirs = [ "app/images", "vendor/images" ] and could thus override a vendor image with one of my own.
  3. I change Compass to support per-compilation configuration. I could have project-wide defaults in the Compass configuration file. Then I would do something like
Compass.compile('vendor/stylehseets/bar.scss', :images_dir => 'vendor/images')

I'm equally happy with #2 and #3. I'd love to hear people's thoughts.

(NB: though this project is structured much like a Rails project, it's not Rails. Indeed, there's no Ruby server at all. It's a static site generator using rake-pipeline)

@jamesarosen
Copy link
Author

@chriseppstein suggested instead doing something like what sprockets-sass does. That is, monkey-patching the Functions::Urls methods to work with my environment. This is a proven method, but I believe the fact that that exists (and in several other repositories as well) shows that this is something that people would appreciate being able to do in Compass.

@buhrmi
Copy link

buhrmi commented Apr 20, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment