Iteration over a directory of images

[xcephe]

We have a directory of images (icons) that we package as base64 using a few lines of Python. Since the rest of our CSS is moving into Compass/SASS, I looked for a way to iterate over a directory, but found none. Use case:

@for $img in directory("icons/16") {
    background-image: inline_image($img);
}

[chriseppstein]

The @for $var in $list syntax won't be available until 3.1 and I think image-files() is probably a better name and I think it should probably accept a glob syntax of some kind.

After saying all that, I'm not sure how generally useful this is. Can you provide a better example?

[chriseppstein]

Going to close this for now because I don't understand your use case. Feel free to add details and I'll consider reopening.

[buhrmi]

I've been looking for this, too. Here is my use case:

@for $img in image-files("public/images/icons")
$base: base_filename($img)
##{$base}
  height: image-height($img)
  width: image-width($img)
  background-image: url("public/path/to/#{$base}.png")

Hope it makes sense.

[chriseppstein]

You can get this behavior in an even more performant way by using the spriting features of compass v0.11. Please investigate and let me know if it meets your needs or not: http://beta.compass-style.org/help/tutorials/spriting/

[buhrmi]

Yes, I agree that this is more performant when displaying a lot of small images at once. However, in my scenario, there are about 100 different images and each has a resolution of at least 300x300. IMHO, spriting does not make sense in this case.

[chriseppstein]

will consider this feature for a future release. In the mean time, if you are handy with ruby you can extend compass to provide this feature. Poking around in the spriting code should reveal how.

[buhrmi]

All right, will do!