SCSS - Getting Image Dimensions

Question

I am using the inline-image function to 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 the 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');
}

Does anything like this exist?

Solution

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

You've guessed the right function names.

To use them you'll need to install 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 you to use sprites for icons: http://compass-style.org/reference/compass/helpers/sprites/

Comments

[sissonb]

Just wasn't importing the helper functions. That's awesome compass can generate sprites too. Will defiantly change over to sprites. Thanks for the help!

[Arthur Alvim]

I believe there's a missing ; after @import "compass/helpers". It won't compile without it.

[Phil Tune]

Thanks for this. This helped me make a mixin for a common pattern I use: @mixin imgdiv($filepath) { background: url($filepath) no-repeat center / cover; padding-top: image-height($filepath) / image-width($filepath) * 100%; }