Sprite Generierung mit Glue

Glue ist ein auf Python basierendes kleines Command Line Tool das einem bei der Sprite Generierung behilflich ist.

http://glue.readthedocs.org/en/latest/index.html

Wenn man Glue einmal installiert hat reicht ein Aufruf von

glue input output

um aus einem Input Ordner aus Icons ein Sprite samt zugehörigem CSS File im Output Ordner zu erstellen.

Das sieht schon recht vielversprechend aus. Allerdings sind noch ein paar Anpassungen nötig. Zuerst einmal möchte man mittels Konfiguration Margins oder Paddings um bzw. in die Icons einfügen dass lässt sich einfach per Konfiguration erledigen:

$ glue input output --margin=5

Nun möchte man noch dass CSS Output optimieren und am Besten eine SCSS-Datei generieren. Dazu bietet Glue auch Konfigurationsmöglichkeiten. Im Speziellen ist es möglich ein SCSS Output zu erstellen und ein SCSS-Template mitzugeben um das generierte SCSS zu steuern. Glue bedient sich dabei der jinja Template Engine.

Ein einfaches SCSS-Template könnte z.B. so aussehen:

.my_sprite {
    background-image:url('{{ sprite_path }}');
    background-repeat:no-repeat;
    {% for image in images %}
    &.{{ image.label }}{{ image.pseudo }} {
        background-position:{{ image.x ~ ('px' if image.x) }} {{ image.y ~ ('px' if image.y) }};
        width:{{ image.width }}px;
        height:{{ image.height }}px;
    }
    {% endfor %}
    {% for r, ratio in ratios.iteritems() %}
    @include mq-retina() {
        background-image: url('{{ ratio.sprite_path }}');
        background-size: {{ width }}px {{ height }}px;
    }
    {% endfor %}
}

Ein Aufruf von

$ glue icons sprites --retina --scss-template=template-scss.jinja --scss --namespace= --sprite-namespace=ic --margin=5

generiert dann schon ein individuell angepasstes SCSS.

Das ganze lässt sich noch weiter optimieren. Ich empfehle bei Interesse ein Studium der Dokumentation