Relative URLs (e.g. background image) in @import-ed files

[Sébastien Cevey]

Hello,

I've been trying to use Sass for one of the projects I work on, but I encountered an issue with URLs to background image files in a partial stylesheet which is @import-ed into a parent stylesheet in another directory. The path of the URL in the resulting CSS file, also in the directory of the parent, then points to a bad URL.

Simple example:

top/
foo.scss
below/
bar.scss
images/
bg.png

== foo.scss ==
@import "below/bar.scss"
==

== bar.scss ==
#foobar {
background-image: url("images/bg.png");
}
==

The resulting foo.css file will make the path to the background image point to top/images/bg.png and not top/below/images/bg.png.

Because the project uses a very large and deeply nested collection of partial files (each associated with a widget), we'd rather keep the URLs in each partial SCSS as relative to that file, rather than to the top of the hierarchy. This also allows using any intermediate partial file in the hierarchy from a browser, as the URL would still correctly resolve.

From what I could tell, and correct me if I'm mistaken, but Sass doesn't support this use case by default and instead, users are expected to write URLs in partial files such that they resolve correctly from the expected parent file.

I tried to implement a "rel-url" extension function which would return an updated path based on path of the @import-er file relatively to that of the @import-ed file. In the example above, when rendering foo.scss, it would return "below/images/bg.png". However, I haven't been able to find any variable in the EvaluationContext or its options that would give me the original filename of the file which contained the function (in the example above, bar.scss), so I'm not able to resolve the relative path between the file being generated (foo.scss) and the base directory of the file containing the function call.

I was hoping that options[:filename] would be just that, but it seems to be the filename of the file being generated (foo.scss) instead.

Has anyone encountered this problem before, or could someone point me to a way to solve it?

That'd be much appreciated!

Thanks in advance, and thanks for a very neat project!

--
Sébastien Cevey

[iGbanam]

I haven't encountered the problem but you should look into integrating the variables provided by compass - such as css_dir, sass_dir and images_dir - into your stylesheet.

Sent from an Asteroid in Space™

> --
> You received this message because you are subscribed to the Google Groups "Sass" group.
> To post to this group, send email to sass...@googlegroups.com.
> To unsubscribe from this group, send email to sass-lang+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/sass-lang?hl=en.
>

[Chris Eppstein]

#foobar {
 background-image: url("images/bg.png");
}

Should be:

#foobar {
 background-image: image-url("bg.png");
}

[Chris Eppstein]

Oh. Perhaps you're using vanilla sass :) If you're using compass the previous statement applies. If not, then you're kinda on your own.

chris