SCSS - Image Acquisition

Question

I use the function inline-imageto create icon classes. This is my current SCSS:

.folder {
    background: inline-image("icons/home/folder.png", 'image/png') no-repeat center;
    height: 30px;
    width: 41px;
}

I am looking for a function that can determine the width and height of an image, so I can do something like this:

.folder {
    background: inline-image("icons/home/folder.png", 'image/png') no-repeat center;
    height: image-height("icons/home/folder.png", 'image/png');
    width: image-width("icons/home/folder.png", 'image/png');
}

Is there anything similar?

Answer 1

Found this http://compass-style.org/reference/compass/helpers/image-dimensions/

You guessed the correct function names.

To use them, you need to install a compass.

It will be something like this:

@import "compass/helpers";

.folder {
    background: inline-image("icons/home/folder.png", 'image/png') no-repeat center;
    height: image-height("icons/home/folder.png");
    width: image-width("icons/home/folder.png");
}

By the way, I would recommend using sprites for the icons: http://compass-style.org/reference/compass/helpers/sprites/