Ich verwende Compass, um CSS-Sprites zu generieren.
Ich habe einen Weg gefunden, ein Sprite einmal zu definieren und es in verschiedenen .scss-Dateien zu verwenden, aber ich bin mir nicht sicher, ob das die richtige Lösung ist.
Der beste Weg, den ich bis jetzt finden konnte, ist:
_variables.scss partielle Datei _variables.scss partiellen Datei _variables.scss partially in jede .scss-Datei Beispiel
_variables.scss Datei:
%Vor%firstPage.scss-Datei:
%Vor%secondPage.scss-Datei:
%Vor%Und das funktioniert, aber ...
Das Problem ist, dass jedes Mal, wenn Compass die scss-Dateien kompiliert (firstPage.scss, secondPage.scss), die partials _variables.scss liest und dann alle Bilder liest und versucht, das Sprite jedes Mal zu erzeugen.
Das Ergebnis ist, dass der compile -Prozess in diesem Fall endet:
%Vor%Und das ist extrem langsam, weil ich viele Seiten und viele Dateien im siteSprite Bildordner habe.
Wie kann ich dieses Problem vermeiden?
Ich werde erklären, wie ich Kompass-Sprites benutze, und hoffentlich wird das auch für dich hilfreich sein. Ich erstelle normalerweise eine _base.scss-Teildatei, in die ich alle generischen @ imports und @ includes plus irgendeinen generischen css-Code für mein Projekt lege. In der _base.scss füge ich auch den folgenden sprites-spezifischen Code hinzu (angenommen, dass der Ordner, in dem ich meine Icons habe, "icon" heißt und dass meine Icons die Erweiterung .png haben):
%Vor%Diese _base.scss ist die erste Datei, die ich in eine * .css.scss-Datei (das Äquivalent von "firstPage.scss" und "firstPage.scss") meines Projekts importiere.
Nun, um eines dieser Sprites in einem div zu verwenden, mache ich das einfach:
%Vor%Dabei steht "myicon" für den Namen einer .png-Datei im Ordner "icon".
Dieses Kompass-Tutorial ist eigentlich sehr hilfreich, also sollten Sie es sich ansehen.
>Wenn Sie befürchten, dass einige Dateien mehr als einmal importiert werden, können Sie versuchen, das Plugin Kompass-Einmal importieren .
Tags und Links compass-sass sprite css-sprites