Ich arbeite an einem Moovweb-Projekt, das Kompass verwendet. Im Moment implementiere ich Unterstützung für 2x Bilder für Sprites.Compass gibt den Fehler Unbekannter Dateityp: png '))
Was ich tue, ist, lassen Kompass die 1x Sprite erzeugen, etwa so:
$icons-dimensions: true;
@import "icons/*.png";
@include all-icons-sprites;
Und dann, direkt nach diesem, ich bin auch und Ausführen der SCSS Datei, die die Sprite-Regeln für 2x generieren (unter Verwendung von Medien-Anfragen):
@import "../_retina-sprites.scss";
$icons2x: sprite-map("icons2x/*.png");
.icons-logo {
@include retina-sprite(logo, $icons2x);
}
.icons-bag { @include Retina-Sprite (Tasche, $ icons2x); }
Ich habe diesen _retina-sprites.scss (basierend auf Adam Brodzinski's version) eine mixin enthalten, um die Medienabfrage Regel hinzufügen, um die 2x Bilder zu wählen, etwa 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);
}
}
}
Allerdings erhalte ich diese Ausgang bei der Erzeugung den Sprites auf der Linie, die ruft sprite-path():
Syntax error: Unrecognized file type: png'))
was ich, dass Kompass denken macht, ist eine Sprit-uRL anstelle einem Sprite-Pfad zu schreiben, damit die ')) suffi geben x zum Dateinamen.
Hat jemand schon mal hier reingekommen?
Hallo @noj, dass hat mir wirklich geholfen, das Problem zu lokalisieren. Der Grund dafür ist, dass nach der Kompassversion 0.11.7 (antares) viele Spritfunktionen enthalten waren. Ich habe einige davon in diesem Code-Snippet verwendet. Auf meiner lokalen Umgebung hatte ich Kompass 0.12.2 (Alniman), was gut funktionierte. Aber in einer Integrationsumgebung hatte ich nur 0.11.7, was nicht funktionierte. Danke für Ihre Hilfe! – fegemo