responsive design - Compass: Exporting Sprites Positions as Percentages -

when using compass' sprite generator, 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 way in these can generated in percentages in order them used responsively?

i've written own, doesn't work in browsers. here's 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 0 through ($steps - 1) {         $step_width: $i * $single_image_width;         &.step-#{$i} {             background-position: percentage(($step_width / $total_image_width)) 0;             // include these see relation between percentage , step count             img {                 display: none;             }         }     } } 

maybe not idea, since generator might special kind of optimization pixel based approach works best?

again, question is: there way make compass generate css in positions of sprites generated percentages , not pixels?

at end, solution make percentages have no decimal places or 1 decimal place. works in browsers beautifully.

for sprites have weird number of images (let me clarify, these sprites same width) solution make image bigger. example, if image has 17 slides, image can extend simulate 25, thereby creating percentages rendered correctly browser.