Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getting sprite height/width on 2.0 release version #33

Open
mishterk opened this issue Mar 20, 2014 · 1 comment
Open

Getting sprite height/width on 2.0 release version #33

mishterk opened this issue Mar 20, 2014 · 1 comment

Comments

@mishterk
Copy link

I'm having some trouble getting the actual heights and widths of images within the sprite. I'm using the 2.0 branch, as I need the multi sprite support, but the following code throws an error for me;

image-height(sprite-file($sprite, $file));

In version 1, I would just use the $sprite variable as the reference to the sprite itself, but I can't quite figure out how to reference a sprite in 2.0. I've tried using the name that I added the sprite with in

retina-sprite-add(name, ... )

... but I still get an error telling me the first argument in sprite-file must be a sprite map.

How do I get the sprite map when using multiple sprites?

Cheers

@mishterk
Copy link
Author

For those who might read this looking for an answer; my solution was to pinch some of the code within the extension and create the following;

//  GET THE SPRITE MAP
//  Returns the sprite map so we can reference it to get other properties. Necessary due to multiple sprites
//  not having their own variable.
//  The code is pinched from the @mixin retina-sprite() in RSFCv2.0
@function get-retina-sprite-map($sprite-name) {
    $index : 2;
    $len : length($retina-sprite-names);
    @for $i from $index through $len {
        @if $sprite-name == nth($retina-sprite-names, $i) {
            $index : $i;
        }
    }
    $sprite-map : nth($retina-sprite-sprites, $index);
    @return $sprite-map;
}

The function gets the reference to the correct sprite, so we can then use it as follows;

$sprite-map : get-retina-sprite-map('sprites-registered-name');
height: image-height(sprite-file($sprite-map, $sprite));

If anyone has a better solution, or if I'm completely missing the simple answer that already exists within the extension, I'm all ears.

Cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant