How can I correct my compass spritesheet path?

Question

I'm going crazy trying to figure this out. I'm using compass on a Wordpress project, and I have the compass configure.rb file saved in my Wordpress theme root. Here is my configure.rb file:

add_import_path "bower_components/foundation/scss"


http_path = ""
http_images_dir = "images"

css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
relative_assets = true

output_style = :expanded
environment = :development

line_comments = false
color_output = false

The directory structure is as follows:

theme_folder
|
|-css
|-images
|-js
|-scss

The configure.rb file is in the theme folder which is serving as the project root. When I compile the folowing scss with compass:

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

@import "compass/utilities/sprites";

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

#site-title h1 a {

    @extend .images-logo;

    display: block;
    width: 250px;
    height: 0;
    overflow: hidden;
    padding-top: 73px;
}

I get the following css:

.images-sprite, .images-logo, #site-title h1 a {
  background: url('../images/../images-s4b3b787fa3.png') no-repeat;
}

As you can see, the image url is really messed up. Any idea why this is happening? Thank you!

score 0 · Answer 1 · answered Jun 15 '14 at 13:49

First remark: since you are using the relative_assets the http_path and http_images_dir options are useless since ignored by Compass.

The @import directive loads files according the property project_path for Scss files and the property images_path for images.
To known the value of the property images_path, you can type the following command in a terminal:

compass config -p images_path

You can note that the images_path has for value "project_path" + "/" + images_dir. So, to import your spritesheet, you do not have to specify the location of the images directory.
But, basic, you can't import all the images of the images_dir in a spritesheet. You have to regroup the images of a spritesheet in a subdirectory located in the images_dir directory (ie images/icons).

Once this is done, simply import your spritesheet with the directive @import "icons/*.png";.

Alternative way

If you want to create a spritesheet with the content of the whole images_dir directory, you have to precise the generated_images_dir option to point a different location of the images_dir (to avoid infinite loop):

css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
generated_images_dir = "."
relative_assets = true

How can I correct my compass spritesheet path?

1 Answers1

Alternative way