Platzhalter in Sass 3.2

Das letzte Update von SASS hat ein interessantes Feature mitgebracht. Platzhalter. Diese ermöglichen den einfachen Einsatz von CSS Objekten, mit dem Vorteil, dass diese nur dann angezeigt werden, wenn sie auch wirklich benutzt werden. Wie die Platzhalter funktionieren erkläre ich jetzt. Ganz Kurz. Versprochen.

SASS ermöglicht bereits die Erweiterbarkeit von CSS Blöcken mithilfe von @extend. Hierbei lassen sich beliebige CSS Blöcke mit einen bereits definierten Block erweitern. Ein Beispiel:

// Diese Blöcke sollen später evtl. genutzt werden:
.float-left{
    float: left;
}
.float-right{
    float: right;
}

// Die Blöcke die erweitert werden. 
.teaser{
    @extend .float-left;
    background: white;
    color: black;
    width: 300px;
}

.zweiter-teaser{
    @extend .float-left;
    background: green;
    color: yellow;
}

Das sieht im kompilierten CSS so aus:

.float-left,
.teaser,
.zweiter-teaser{
    float: left;
}

.float-right{
    float: right;
}

.teaser{
    background: white;
    color: black;
    width: 300px;
}

.zweiter-teaser{
    background: green;
    color: yellow;
}

Zum einen haben wir schon mal nicht alles dupliziert, wie es mit einem normalen @include passiert wäre, allerdings wird die float-right Klasse trotzdem sichtbar und bei größeren Projekten, insbesondere mit OOCSS in der Anwendung, werden alle Klassen in das CSS geschrieben - ob benutzt oder nicht. Und hier kommen Platzhalter ins Spiel.

// Hier stehen wieder die zu erweiterbaren Klassen.
// Der Unterschied ist, dass hier ein % statt eines Punktes (oder Raute) benutzt wird
%float-left{ float: left; }
%float-right{ float: right; }

// Es wird mit % erweitert
.teaser{
    @extend %float-left;
    background: white;
    color: black;
    width: 300px;
}

.zweiter-teaser{
    @extend %float-left;
    background: green;
    color: yellow;
}

wird zu:

.teaser,
.zweiter-teaser{
    float: left;
}

.teaser{
    background: white;
    color: black;
    width: 300px;
}

.zweiter-teaser{
    background: green;
    color: yellow;
}

Aus der Platzhalter Klasse wird hier keine Klasse in das CSS geschrieben und nicht benutzte Platzhalter werden gar nicht erst angezeigt. Nutzt man Platzhalter nun mit OOCSS Klassen hilft es aufgeblasene CSS Dateien zu verhindern und nur das nötigste an CSS zu produzieren. Für ein noch ausführlicheres Beispiel (mit Ninjas!) empfehle ich diese Präsentation auf Speakers Deck

Fragen und Anmerkungen gerne in die Kommentare.