CODEWITHSUNDEEP
sasscompass-sass
donatJ
donatJ

Reputation: 3364

Compass Sprite Sheet Paths with Webroot Folder

I have been fighting with pathing for Compass Sprites for a couple days now.

I have the following structure to my site:

+ project
    - config.rb
    + application
        + scss
            - _base.scss
            - main.scss
            - ...
    + public (webroot)
        + js
        + css
            - main.css
        + images
            + sprites
                - boxarrow.png
                - boxcheck.png
                - ...

My config.rb initially looked something like:

http_path = "/"
css_dir = "public/css"
sass_dir = "application/scss"
images_dir = "public/images"
javascripts_dir = "public/js"

Within my scss file I am using the following to scan my sprites: 

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

And use them with a mixin I wrote:

@mixin scaled-sprite-background($name, $scale, $spritemap) {
    background: $spritemap;

    $spritePath: sprite-path($spritemap);
    @include background-size(image-width($spritePath) * $scale);

    $position: sprite-position($spritemap, $name);
    background-position: (nth($position, 1) * $scale) (nth($position, 2) * $scale);

    height: image-height(sprite-file($spritemap, $name)) * $scale;
    width: image-width(sprite-file($spritemap, $name)) * $scale;
}

The problem was my sprite paths were coming out ala public/images/sprites-s500a0fe4b1.png whereas they should not have the public/.

I removed the public/ so I had just images_dir = "images" but now compass couldn't locate my images.

I set http_path = "public" and got double public public/public/images/sprites-s500a0fe4b1.png

I tried many more configurations using images_path and such to no avail.

The working hack I have currently follows:

http_path = "/"
css_dir = "public/css"
sass_dir = "application/scss"
images_dir = "images"
images_path = "public/images"
javascripts_dir = "public/js"

on_sprite_saved do |filename|
  FileUtils.mv(filename, images_path + "/" + File.basename( filename )) if File.exists?(filename)
end

Its not pretty but it works. Surely there needs to be a better way!

Any help would be greatly appreciated.

Upvotes: 4

Views: 1214

Answers (1)

piouPiouM
piouPiouM

Reputation: 5037

Relative assets

If you want to use relative path between images and CSS (ie background: url('../images/foo.png')), you have to add relative_assets = true in your configuration file:

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

With this, Compass will ignore the http_path option and will generate the access to the images relative to the location of the CSS file paths.

Absolute assets

If you want to use absolute paths to access to your images (ie background: url('/images/foo.png'), according the configuration reference, remember that the local paths *_path are different of the full http path http_*_path.

So, to access to the images stored in public/images when the webroot is public, you have to work in two times:

  1. you have to tell to Compass that the images are stored locally in the public/images directory: images_dir = "public/images".
  2. the full http path must be configured: http_images_path = "/images" for regular images (when you use the helper image-url()) and http_generated_images_path = "/images" for generated sprites.

The final configuration file becomes:

css_dir = "public/css"
sass_dir = "application/scss"
images_dir = "public/images"
javascripts_dir = "public/js"
http_images_path = "/images"
http_generated_images_path = "/images"

Upvotes: 6

Related Questions