Question

I’m confused by how the directory structure works. For example, mine is like:

--compass
    --css
    --images
        --frontSprite
            Images
    -sass
        --_base.scss
        --advertiser.scss
    config.rb

When I try to import my images I am using:

@import "frontSprite/*.png";

in my _base.scss, but this generates me an error which I feel is related to not finding the directory correctly. Any suggestions?

Answer 1

Well, the correct directory structure depends on what you’ve set in your config.rb.
Should look like that:

images_dir = "images"
http_images_path = "/this/path/is/rendered/in/the/css/file"

images_dir tells compass where the images lie (relative to the config.rb) and the http_images_path defines what is actually rendered in the CSS-output.

Try the command compass sprite "images/frontSprite/*.png" (this will generate the sprite css-output) from within your compass directory to debug the path.

Sidenote: When you work with .pngs you should consider installing oily png, this will remarkable speed up the sprite generation process. It’s extremely simple just use gem install oily_png and Compass will automatically detect that it is installed.