How to Create a Sprite from a Folder with and Without Background-Size (Using Compass)

How to create a sprite from a folder with and without background-size (using Compass)

That does it. It iterates over the whole map:

@each $sprite in sprite_names($logo-sprites) {
    .logo-#{$sprite} {
        @include resize-sprite($logo-sprites, $sprite, 40);
    }
}

This helped: Way to iterate over sprites in a map

It's great to scale down sprites in modern Browsers without loading another generated sprite-image. If the logos sometimes are 50px, but should also be 20px somewhere else, this is perfectly fine.

Compass sprites: applying individual styles to every sprite class without writing out each sprite name manually

You can retrieve the list of names with the function sprite-names($map), like that:

@each $item in sprite-names($sprites-sprites)
  ...

Compass creates the sprite map $<map>-sprites after importing images (@import "<map>/*.png").

Compass sprite - avoid using extends when including a sprite

Using Compass sprites inside media queries is not possible, at least the way it's described in the documentation.

There are a couple of workarounds:

• creating sprites manually via command line;
• using a custom mixin.

Getting image width and height from compass sprites

I found the solution. Adding $common-sprite-dimensions: true; (link to compass sprite options docs) will put the width and height into the output.

Compass Sprite Sheet Paths with Webroot Folder

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"

Get reference to Compass sprite map when using @import

Say you import via @import "icons/*.png", the variable $icons-sprites now contains the reference to the sprite-map function used by Compass' @import function.

The key is using $<folder>-sprites to reference that sprite map.

Spriting with Compass - Should icons be of the same size?

Compass combines all of your images vertically no matter what their size into a single image. It should then calculate the height of each image and assign it as the background position offset. If your li has a height of say 20px and the current-menu icon has a height of 16px, you'll see some of the next image in the sprite.

You can either make all of your icons the same size or use the customization options to set things like spacing, position, and repeating. You can read more about it in the Spriting tutorial.

---

Related Topics