Compass: Exporting Sprites Positions as Percentages

Question

When using compass' sprite generator, the generator creates CSS rules based on pixels.

Example code:

@import 'compass/utilities/sprites';

$sprite-2-layout: horizontal;
@import "sections/anatomy-sprite-test/sprite-2/*.png";
@include all-sprite-2-sprites;

$sprite-3-layout: horizontal;
@import "sections/anatomy-sprite-test/sprite-3/*.png";
@include all-sprite-3-sprites;

$sprite-4-layout: horizontal;
@import "sections/anatomy-sprite-test/sprite-4/*.png";
@include all-sprite-4-sprites;

Example Output:

/* line 84, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */
.sprite-2-00 {
  background-position: 0 0;
}

/* line 84, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */
.sprite-2-00 {
  background-position: -244px 0;
}

Is there a way in which these can be generated in percentages in order for them to be used responsively?

I've written my own, but it doesn't work well in certain browsers. Here's my approach:

@mixin sprite-percentage-step-generate($steps, $single_image_width) {
    $total_image_width: ($single_image_width * $steps) - $single_image_width;
    background-position: 0 0;
    img {
        display: none;
    }
    @for $i from 0 through ($steps - 1) {
        $step_width: $i * $single_image_width;
        &.step-#{$i} {
            background-position: percentage(($step_width / $total_image_width)) 0;
            // We include these to see the relation between the percentage and the step count
            img {
                display: none;
            }
        }
    }
}

Maybe this is not a good idea, since the generator might do some special kind of optimization so that the pixel based approach works best?

Again, the question is: Is there a way to make Compass generate CSS in which the positions of the sprites are generated as percentages and not as pixels?

How do you think this will work? You can't translate pixels to percentages. The background-position property as a percentage is relative to the element, not the image. You need to think about how to get the desired results with pure CSS *first*, then ask about how to do it with Sass. — cimmanon, Sep 10 '14 at 15:22
I don't understand the confusion. I already have a version of this working (written by myself), which works. The reason why this works is that, if you know the width of a single image and the number of steps every sprite has you can set the size if that background image as a percentage and then set the `background-position-x` as a percentage. What's the problem? No need to convert pixels to percentage. — Jorge Silva, Sep 10 '14 at 15:26
To answer your question more directly, using `background-position-x` is based on setting the `background-size` as the number of steps in this sprite (I forgot to mention that all images are the same width). — Jorge Silva, Sep 10 '14 at 15:27
If "it doesn't work well in certain browsers", that's probably a sure sign that you *shouldn't* be doing it. — cimmanon, Sep 10 '14 at 15:34
I agree 100% with you. Maybe, I shouldn't be trying to do this. We agree, but the question is then: 1. Why exactly would this not work? 2. Is there any possible way to get around this? I'm aware that this is not the default compass functionality and probably not how it was intended to be used. — Jorge Silva, Sep 10 '14 at 15:39
BTW, when I say that it doesn't work well in certain browsers is that in FF and IE10, they are a little shacky, implyging that the percentages are not correct or that the browsers is not good at interpreting percentages that are very exact (Ex: 84.84848%) or that Compass skews the percentage in the image a bit, in order for its pixel based approach to work. — Jorge Silva, Sep 10 '14 at 15:41
The usage of a percentage value for a background is interesting but primarily useful if you're using positions that are at the edges. So if you had a sprite that was upper left that would be positions of 0% and 0%, or bottom right of the sprite would be 100% 100%. But this is not much different from using top right or bottom left, etc. Interesting idea but hard to see what advantages it offers. Now, if you're seeking a different sprite sheet for different screen density then it seems like you'd be using a different sheet with different pixel values. — artlung, Sep 10 '14 at 22:12

score 2 · Answer 1 · answered Sep 11 '14 at 01:52

At the end, the solution was to make all the percentages have no decimal places or 1 decimal place. This works in all browsers beautifully.

For sprites that have a weird number of images (Let me clarify, that these sprites are all the same width) the solution is to make the image bigger. For example, if the image has 17 slides, the image can be extend to simulate 25, thereby creating percentages that are rendered correctly by the browser.

Compass: Exporting Sprites Positions as Percentages

1 Answers1