I am working on a moovweb project that uses compass. Right now, I am implementing support for 2x images for sprites.
What I am doing is to let compass generate the 1x sprite, like so:
$icons-dimensions: true;
@import "icons/*.png";
@include all-icons-sprites;
And then, right after this, I am including and executing the scss file that will generate the sprite rules for 2x (using media queries):
@import "../_retina-sprites.scss";
$icons2x: sprite-map("icons2x/*.png");
.icons-logo {
@include retina-sprite(logo, $icons2x);
}
.icons-bag {
@include retina-sprite(bag, $icons2x);
}
I created this _retina-sprites.scss (based on Adam Brodzinski's version) to contain a mixin to add the media query rule to choose the 2x images like so:
@import "compass/utilities/sprites"; // Include compass sprite helpers
@import "compass/css3/background-size"; // Include helper to calc background size
@mixin retina-sprite($name, $sprites2x) {
background-repeat: no-repeat;
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
& {
$pos: sprite-position($sprites2x, $name);
background-image: sprite-url($sprites2x);
background-position: nth($pos, 1) / 2 nth($pos, 2) / 2;
@include background-size(ceil(image-width(sprite-path($sprites2x)) / 2) auto);
}
}
}
However, I am getting this output when generating the sprite on the line that calls sprite-path()
:
Syntax error: Unrecognized file type: png'))
Which makes me think that compass is writing a sprite-url instead of a sprite-path, hence giving the '))
suffix to the file name.
Has anyone come into this before?