I came across this problem when I was trying to override some values from another .scss file I imported.
Specifically I wanted to use slick slider in my project.
So I went ahead, downloaded the sources and imported that code.
Also for slick slider to work in my setup I had to give it its own location via variable overriding.
So in the end I had something like this:
$slick-font-path: "../bower_components/slick-carousel/slick/fonts/";
$slick-loader-path: "../bower_components/slick-carousel/slick/";
@import "../../bower_components/slick-carousel/slick/slick";
@import "../../bower_components/slick-carousel/slick/slick-theme";
Nothing special so far.
The interesting part begins when I find out that this doesn't work because some clever person obviously wanted to use compass to its full potential and added the following lines in the slick .scss code:
@function slick-image-url($url) {
@if function-exists(image-url) {
@return image-url($url);
}
@else {
@return url($slick-loader-path + $url);
}
}
.slick-list {
.slick-loading & {
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
}
And you cannot blame them because this is IMO a correct and very valid approach to tackle this situation. When compass sees this code it will check for directory configurations in config.rb
and use specified paths in there as image-url() is an Url Helper.
The problem however is that I can't find a way to not use or unset that function when I don't want It to be used. (it defaults to "/images")
Setting the image paths in config.rb hasn't helped either, I guess that doesn't make the function disappear in some magical way.
In the end my solution to this was overriding that function like so:
@function image-url($url) {
@return url($slick-loader-path + $url);
}
But this of course will get you into trouble when you have to work with other code afterwards that should actually use the location from config.rb. There has to be a better solution to this.
The image-url() function is written in Ruby, meaning it is injected into Sass itself and behaves the same way as any other standard function (note that Compass is just a fancy wrapper around Sass). This function is always available to you without having to import anything (unlike functions written in Sass). This also means that if you overwrite it, there is no way to get the original version back.
If a 3rd party library is referencing this function inappropriately, then you should request a fix with them if you're unwilling to patch it yourself.