sprite-url() returns incorrect path

1.2k views Asked by At

I am using compass with gulp.
I am generating sprites and have the following mixin:

$sprite-icons: sprite-map("sprite-icons/*.png");
$sprite-icons-url: sprite-url($sprite-icons);

@mixin sprite-icon($name) {
    background-image: $sprite-icons-url;
    background-position: sprite-position($sprite-icons, $name);
    background-repeat: no-repeat;
}

The gulp task I have takes app/styles/index.scss and compile it into build/styles/index.css. The images are takes from app/assets/images/sprite-icons and I want the sprite image to be in build/assets/images.

I am running compass with the following arguments:

images_dir = 'app/assets/images'
css_dir = 'build/styles'
sass_dir = 'app/styles'
generated_images_path = 'build/assets/images'

Now I have the following style in one of my scss files:

.my-image {
    @include sprite-icon('pin-small');
}

And I got:

.my-image {
  background-image: url('../../assets/images/sprite-icons-sc86bb5a991.png');
  background-position: 0 -669px;
  background-repeat: no-repeat;
}

The thing is that I need the background image to be:

background-image: url('/assets/images/sprite-icons-sc86bb5a991.png');

This is happened also when using grunt (the framework doesn't really matters).

Any idea how to fix this?

0

There are 0 answers