Spriting mit Compass

Allgemein

Ich gehe ganz kurz auf die Basics ein: Spriting ist eine Technik, welche viele kleine Bilder zu einem großem Bild zusammenfasst. Diese Technik spart nicht nur ein paar KB bei der Dateigröße, sondern hat den Vorteil, dass nicht zu viele Verbindungen zum Server aufgebaut werden müssen.

PS: Ich habe darüber bereits vor einiges Zeit im Zusammenhang mit „Webseiten Komprimierung“ geschrieben.

Kommen wir jetzt jedoch zum interessanten Teil. Wie setzt man dies ein, ohne bei jeder kleinen Bildveränderung / Hinzufügung Mehraufwand zu generieren. Und die Lösung heißt „compass„. Dies ist ein Framework, welches auf Sass aufsetzt und dieses um einige nützliche Features ergänzt.

Installation / Konfiguration

Hier ist ein kleines Bash-Skript, welches in meinen „.dotfiles“ beinhaltet ist und die erforderlichen Programme (ruby, sass, compass, oily_png) installiert.

http://ift.tt/219f78Y

Es folgt eine Beispiel-Konfiguration für compass, woraus sich bereits die Order für Bilder, Scss, css und js hervorgehen:

http://ift.tt/219f9hd

Beispiel

URL: http://ift.tt/219f790

SCSS:

Ich habe die für das Sprite relevanten Zeilen rot gekennzeichnet. Außerdem sollte man erwähnen, dass der Verzeichnis-Name „**/spritesTest/“ sich in der „include“-Anweisung wiederfinden muss. Die Bilder selber lassen sich anschließend über den Dateinamen im CSS referenzieren, so dass man möglichst einfache / eindeutige Dateinamen verwenden sollte.

PS: hier findet du das entsprechende CSS, welches diese paar Zeilen SCSS generieren

// compass
@import "compass/css3";
@import "compass/utilities/sprites";

/*
* - - - - - - - - - -
* some icons for testing
* - - - - - - - - - -
*/

@import "../images/spritesTest/*.png";
@include all-spritesTest-sprites;
#spritesOverview span {
width: 32px;
height: 32px;
display: block;
transition: all 0.2s ease-in;
&:hover {
@include transform(scale(1.8));
transition: all 0.4s ease-out;
}
}

@for $i from 1 through 20 {
.step#{$i} {
animation: movement 1500ms ease (75ms * $i) infinite alternate;
}
}

@keyframes movement {
from {
@include transform(scale(1.0) translateY(0px) rotateX(0deg));
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
@include transform(scale(1.5) translateY(-25px) rotateX(45deg));
box-shadow: 0 25px 25px rgba(0,0,0,0.2);
}
}

PHP:

Die paar Zeilen PHP habe ich nur hinzugefügt, da ich keine Lust hatte alle Dateinamen in ein großes Array zu kopieren und diese Datei direkte von der Festplatte auslese.

<?php
use cms\Path;
use cms\twig\TwigWrapper;

require_once 'inc_globals.php';

$fileArray = file_list(Path::getPathDirTheme() . '/images/spritesTest', 'png');

$icons = array();
foreach ($fileArray as $file) {
$file = str_replace(Path::getPathDirTheme() . '/images/spritesTest/', '', $file);
$file = str_replace('emblem-', '', $file);
$file = str_replace('.png', '', $file);

$icons[] = $file;
}

// DEBUG
//dump($icons);
// #############################################################################
// # TwigWrapper | templating
// #############################################################################
$twigWrapper = new TwigWrapper('tpl_imageSprites.twig');

$iconsArray = array();
for ($i = 1 ; $i <= 20 ; $i++) {
shuffle($icons);
$iconsArray[] = $icons;
}

$twigWrapper->assign('iconsArray', $iconsArray);

echo $twigWrapper->render();

Twig:

Zum Schluss noch ein paar HTML-Tags im Twig hinzugefügt und schon können wir die Icons bewundern. ;)

{% extends "tpl_base.twig" %}

{% block head_css %}
{{ parent() }}
<link rel="stylesheet" href="{{ urlTheme }}/css-min/sprites.css" />
{% endblock %}

{% block content %}
{{ breadcrumb | raw }}

<article id="spritesOverview">

{% for i in 1..20 %}

<div class="row step{{ loop.index }}">
{% for icon in iconsArray[i] %}
{% if loop.index <= 6 %}
<div class="medium-2 columns"><span class="spritesTest-emblem-{{ icon }}"></span></div>
{% endif %}
{% endfor %}
</div>

{% endfor %}

</article>
{% endblock %}

Links:

http://ift.tt/MhQ76P
Compass Tutorials #6 — Sprites In Compass

Ähnliche Beiträge:

CSS > SCSS > CSS

Twig — PHP

Web Development mit Linux (Video)

Originally published on Wordpress

Show your support

Clapping shows how much you appreciated Lars Moelleken’s story.