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?