Compass Sprite outline sheets with Webroot folder

Question

I’ve been struggling with Compass Sprites for a couple of days.

I have the following structure for my site:

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

Initially, my config.rb looked something like this:

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

In my scss file, I use the following to scan my sprites:

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

And to use them with 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 that my sprite paths went ala public/images/sprites-s500a0fe4b1.png, whereas they should not have public /.

I deleted public/, so I only had it images_dir = "images", but now the compass could not find my images.

I installed http_path = "public"and received double publicationpublic/public/images/sprites-s500a0fe4b1.png

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

A working hack is currently running:

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 very, but it works. Of course, there must be a better way!

.

Answer 1

CSS (.. background: url('../images/foo.png')), relative_assets = true :

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

Compass http_path CSS.

(, background: url('/images/foo.png'), , , *_path http http_*_path.

, , public/images, - public, :

• Compass, public/images: images_dir = "public/images".
• http-: http_images_path = "/images" ( image-url()) http_generated_images_path = "/images" .

:

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"

Answer 2

Compass, URL :

http_images_path = "/images/"

http_images_path , Compass

http_images_path = {http_path}/{images_dir}