Compass + CodeKit image sprite oddity (error)

Question

When creating a spritesheet CodeKit I have the following SCSS:

@import "../images/quiz/*.png";
@include all-quiz-sprites;

and config.rb has the images folder as "images" which is working fine.

However, when I look into the generated CSS I get the following which results in a 404:

.quiz-sprite {
    background: url('/images/../images/quiz-s2c8de87230.png') no-repeat; 
}

Codekit or Compass is generating an extra "/images/.." - when I remove this manually from the CSS, it locates the spritesheet correctly as it is being created at ../images/quiz-s2c8de87230.png

Any ideas?

Answer 1

To fix this I ended up changing the config.rb to reflect the following (enabled relative assets):

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

And then removed "images" prefix from my SCSS file:

@import "quiz/*.png";

Turns out, Compass already adds the images folder prefix to the generated spritesheet and will add "../" when the relative_assets = true flag is uncommented.

Hope this helps someone out there :D