Sass: @extend vs @media

Im letzten Adventskalender der Webkrauts schrieb Mathias Schäfer über CSS-Modularisierung mit Sass, insbesondere über die Nutzung von Platzhalter-Selektoren in Verbindung mit @extend. Richtig angewandt eine sehr effektive Technik, um mittels Sass generierte Stylesheets (ebenso wie das damit verbundene Markup) übersichtlich, schlank und wartbar zu halten.

Was leider nicht geht

Ich bin neulich über eine Besonderheit beim Einsatz von @extend gestolpert, welche die Nutzung in Responsive Webdesign leider einschränkt: @extend kann innerhalb eines Media-Queries nur auf Klassen oder Platzhalter-Selektoren zugreifen, die innerhalb des zugehörigen @media-Blocks stehen.

Ein Beispiel

Folgender Code funktioniert in Sass nicht und erzeugt eine Fehlermeldung:

%inblock {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

@media only screen and (min-width: 40em) {
    nav li {
        @extend %inblock;
    }
}

Es spielt dabei keine Rolle, ob auf einen Platzhalter-Selektor oder eine CSS-Klasse zugegriffen wird – wenn dieses Beispiel funktionieren soll, muss die „Basisklasse“ innerhalb des @media-Blocks stehen.

Bis zu Version 3.1 von Sass war das übrigens noch möglich, es bläht jedoch laut Sass-Dokumentation das erzeugte Stylesheet unnötig auf, da an verschiedenen Stellen Kopien desselben Codes eingefügt werden müssen. Angesichts der Tatsache, dass es – gerade für Sass-Neulinge – relativ einfach ist, mit Sass unnötig große Stylesheets zu generieren (z.B. indem man durch übermäßig tiefe Verschachtelung unnötige Selektoren erzeugt), ist jede Maßnahme sinnvoll, eben das „intern“ zu verhindern.

Alternativen

Wenn der Selektor, der das @extend anwendet, innerhalb eines @media-Blocks stehen muss, kann stattdessen ein Mixin verwendet werden, ggf. (aber das dürfte vom konkreten Anwendungsfall abhängen) innerhalb eines doppelten Platzhalter-Selektors außer- und innerhalb des Media-Queries.