Compass Sprites

COMPASS SPRITINGSPRITES ERSTELLEN MIT COMPASS

©2012 Michael van Engelshoven

WAS SIND SPRITES?

SPRITES MINIMIEREN DIE ANZAHL DER REQUESTSSo lässt sich eine Seite schneller ausliefern. Speziell

wenn viele kleine Bilder benutzt werden

ALLE ICONS IN EINEM BILD ANORDNEN

SPRITE IM CSS DEFINIEREN.weather-clear-day,.weather-clear-night,.weather-cloudly-day,.weather-cloudly-night { background-image: url(/images/example-sprite.png); background-repeat: no-repeat;}

.weather-clear-day { background-position: 0 0; }

.weather-clear-night { background-position: 200px 0; }

.weather-cloudly-day { background-position: 250px 0; }

.weather-cloudly-night { background-position: 300px 0; }

BEISPIEL FACEBOOK

BEISPIEL WUNDERLIST2

UND WIE HILFT UNS JETZT COMPASS?

EINZELNE BILDER IN EIN VERZEICHNIS KOPIEREN[images_dir]/ sprites/ weather/ clear-day.png clear-night.png cloudly-day.png cloudly-night.png

SPRITE IN EIN COMPASS-STYLESHEET EINBINEN@import "sprites/weather/*.png";@include all-weather-sprites;

UND WIR BEKOMMEN.weather-sprite,.weather-clear-night,.weather-cloudly-day,.weather-cloudly-night { background: url('/images/weather-s34fe0604ab.png') no-repeat;}

.weather-clear-day { background-position: 0 0; }

.weather-clear-night { background-position: 200px 0; }

.weather-cloudly-day { background-position: 250px 0; }

.weather-cloudly-night { background-position: 300px 0; }

SPRITES EINZELN EINBINDEN@import "sprites/weather/*.png";

.weather-widget.day .cloudly { @include weather-sprite("cloudly-day");}

MAGIC SELECTORS

DATEIEN MIT SUFFIXEN VERSEHEN[images_dir]/ buttons/ glossy.png glossy_hover.png glossy_active.png glossy_target.png

SPRITES WIE GEHABT EINBINDEN@import "sprites/buttons/*.png";

a { @include buttons-sprite("glossy");}

COMPASS MACHT DEN RESTbuttons-sprite, a { background: url('/buttons-sedfef809e2.png') no-repeat;}

a { background-position: 0 0;}a:hover, a.glossy_hover, a.glossy-hover { background-position: 0 -40px;}a:target, a.glossy_target, a.glossy-target { background-position: 0 -60px;}a:active, a.glossy_active, a.glossy-active { background-position: 0 -20;}

SPRITEMAPEine Spritemap wird automatisch durch das importieren

der Bilder erzeugt.

@import "sprites/weather/*.png";$weather-sprites // Enthält die Spritemap

SPRITEMAPWir können aber auch eine eigene Spritemap über einen

Glob definieren.

$icons: sprite-map("icons/*.png");

.sprites { background-image: sprite-url($icons);}

GRÖSSE EINES ICONS VERWENDEN$weatherSprite: sprite-map("sprites/weather/*.png");

.weather-widget.day .cloudly { $name: "cloudly-day"; $height: image-height(sprite-file($weatherSprite, $name)); @include sprite-dimensions($weatherSprite, $name); background: sprite($weatherSprite, $name); margin-top: 0 - $height/2; top: 50%;}

VIEL SPASS!

http://slidesha.re/W1R1Nh

REFERENZENCompass Dokumentation

Image Dimension HelpersSprite HelpersSpriting Tutorial

Compass Source auf Github