Sprites mit Compass erstellen und auf unterschiedliche device-pixel-ratios anwenden

Auch wenn ich den CSS Präprozessor Sass nur sehr selten verwende, bietet Compass ein Feature, dass jeder schnell zu schätzen weiß, der einmal zu Fuß aus verschiedenen Grafiken ein Sprite und das entsprechende CSS gebastelt hat.

Installation

Vorraussetzung ist zunächst die Installation von Sass und Compass. Wie das geht, wird in der offiziellen Dokumentation beschrieben:

Das Compass-Projekt erstellen

Ausgangsposition für dieses Tutorial ist zunächst ein leeres Default Compass Projekt was mit folgendem CLI-Kommando erstellt wird:

$ compass create /path/to/project

Die Verzeichnisstruktur sowie grundlegende Schritte im Umgang mit Compass werden direkt ausgegeben:

directory compassdemo/ 
directory compassdemo/sass/ 
directory compassdemo/stylesheets/ 
   create compassdemo/config.rb 
   create compassdemo/sass/screen.scss 
   create compassdemo/sass/print.scss 
   create compassdemo/sass/ie.scss 
   create compassdemo/stylesheets/ie.css 
   create compassdemo/stylesheets/print.css 
   create compassdemo/stylesheets/screen.css 

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

More Resources:
  * Website: http://compass-style.org/
  * Sass: http://sass-lang.com
  * Community: http://groups.google.com/group/compass-users/

To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

Configuration

In der config.rb können nun die Einstellungen den eigenen Vorlieben angepasst werden. Zum Beispiel so:

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
line_comments = false

Die Ordnerstruktur sieht anschließend wie folgt aus:

config.rb
css
images
sass

Die beiden Dateien /sass/ie.scss und /sass/print.scss werden in diesem Tutorial nicht benötigt und gelöscht.

Vorraussetzungen

Vorraussetzung für das Erstellen des Sprites inklusive aller Stylessheets unter Berücksichtigung verschiedener Pixelauflösungen (einfach, Retina, etc.) sind zunächst die Einzelgrafiken für die verschiedenen Devices:

/ratio_1
- back.png
- menu.png
- pause.png
- play.png
/ratio_1.5
- back.png
- menu.png
- pause.png
- play.png
/ratio_2
- back.png
- menu.png
- pause.png
- play.png
/ratio_3
- back.png
- menu.png
- pause.png
- play.png

Vor dem Bauen des Sprites bitte folgendes in der sass/screen.scss im Compass-Projekt-Ordner eintragen:

$icon-layout:horizontal;
@import "icon/*.png";
@include all-icon-sprites;

Die letzten beiden Zeilen sorgen dafür, dass aus allen Einzelbildern in /images/icon/ ein Sprite erzeugt wird. Die erste Zeile gibt an, ob die Einzelbilder horizontal oder vertical angeordnet werden. Um später die Stylesheets für verschiedene Auflösungen verwenden zu können und nur pro Auflösung per Media Query die Sprite-Datei auszutauschen ist es extrem wichtig hier den Wert horizontal anzugeben. Nur in diesem Fall werden die Einzeldateien im Sprite alphabetisch angeordnet. Ansonsten wird nach Dateigröße geordnet und wir benötigen für jedes Device separate Stylesheets in Sachen background-position.

Das Sprite und die Stylesheets erstellen

  1. Den Ordner ratio_1 umbenennen und als icon in der Compass-Projekt-Struktur unter images/icon ablegen
  2. $ compass compile ausführen
  3. /css/screen.css umbenennen in /css/icons.css
  4. /images/icon-...png umbenennen in icons.png
  5. Den Ordner ratio_1.5 umbenennen in icon und in der Compass-Projekt-Struktur unter images/icon ablegen. Die „ratio_1“ Files werden nicht mehr benötigt.
  6. $ compass compile erneut ausführen
  7. /images/icon-...png umbenennen in icons_1.5.png und /css/screen.css einfach löschen
  8. Punkte 5 – 7 für die Ordner ratio_2 und ratio_3 wiederholen

Nun sollten folgende Sprites unter /images/ zu finden sein:

icons_1.5.png
icons_2.png
icons_3.png
icons.png

Nun bitte die im Punkt 3 erzeugte Datei icons.css öffnen und am Ende die Media-Queries eintragen:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    [class^="icon-"], [class*=" icon-"] {
        background-image: url("../images/icons_1.5.png");
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    [class^="icon-"], [class*=" icon-"] {
        background-image: url("../images/icons_2.png");
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) {
    [class^="icon-"], [class*=" icon-"] {
        background-image: url("../images/icons_3.png");
    }
}

Die Anweisungen am Anfang der Datei, die in etwa so aussehen:

.icon-sprite, .icon-back, .icon-menu, .icon-pause, .icon-play {
  background: url('/images/icon-s03c490f429.png') no-repeat;
}

werden durch folgendes ersetzt:

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    vertical-align: text-bottom;
    background-image: url("../images/icons.png");
    background-repeat: no-repeat;
    overflow: hidden;
    background-size: 120px 30px;
}

Damit die background-position-Angaben

.icon-back {
  background-position: 0 0;
}

.icon-menu {
  background-position: -30px 0;
}

.icon-pause {
  background-position: -60px 0;
}

.icon-play {
  background-position: -90px 0;
}

auf alle anderen Sprites angewendet werden können, ist background-size: 120px 30px; mit der Angabe der Dimensionen des Standard-Sprites icon.png notwendig.

Anwendung

Abhängig von den Einzelbildern kann es natürlich notwendig sein, Eigenschaften wie width und height für einzelne CSS-Klassen anzupassen. Verglichen mit der manuellen Sprite-Bastelei hält sich Aufwand mit Compass in angenehmen Grenzen.

<a class="button" href="#">
    <span class="icon-menu"></span>
</a>

Während ich Compass hier nur für Sprites verwende und mit dem generierten Code an anderer Stelle weiterarbeite, bieten im Sass/Compass-Kontext sogenannte Mixins eine weitere Möglichkeit responsive Layouts zu entwickeln. Einen interessanten Artikel hierzu hat beispielsweise 37Signals veröffentlicht: Easy retina-ready images using SCSS.

Tutorial-Quellen herunterladen

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


+ 29 = 30