SASS-Funktion zur Berechnung von Zeilenhöhen ohne Einheit

In diesem Artikel zeige ich euch eine SASS-Funktion, mit der sich eine Zeilenhöhe ohne Einheit errechnen lässt. Ursprung dieser Aktion war, dass ich keine rem mehr einsetzen wollte.

Was ist das Problem mit rem?

Bis vor Kurzem habe ich für die Angabe von Zeilenhöhen und Schriftgrößen immer rem als Einheit genutzt. Dann habe ich im net-Magazine den Artikel »Responsive sizing with em-based design« von Keith J. Grant gelesen, der mir unter anderem eine (eigentlich naheliegende) Lösung für ein Problem vor Augen geführt hat, das ich in dem Moment gerade hatte:

• Alle Schriftgrößen sind mit rem angelegt.
• Die Sidebar soll eine kleinere Schriftgröße bekommen.
• Die Elemente in der Sidebar müssen extra neu angesprochen und auf em verändert werden.

Sein Ansatz ist, für alles em zu nutzen und auf oberster Ebene einer Komponente über rem eine Schriftgröße anzugeben, die damit relativ zum Root-Element ist. So können beispielsweise leicht die Schriftgröße und Abstände in der Sidebar kleiner gemacht werden, indem die rem-Angabe für .sidebar verändert wird.

Was hat das jetzt alles mit der Zeilenhöhe zu tun? ?

Gute Frage. Bei der Recherche danach, ob em eine gute Einheit für line-height ist, bin ich auf eine Stack-Overflow-Antwort gestoßen, in der unter anderem sinngemäß folgendes steht:

»Wenn ein Kindelement die doppelte Schriftgröße des Elternelements und das Elternelement eine Zeilenhöhe von 1.2 hat, dann heißt das, dass die geerbte Zeilenhöhe des Kindelements dem 1,2fachen der eigenen Schriftgröße entspricht, was in Ordnung ist. Wenn das Elternelement hingegen eine Zeilenhöhe von 1.2em hätte, wäre die geerbte Zeilenhöhe des Kindelements das 1,2fache der Schrifgröße vom Elternelement, was deutlich zu klein für die eigene Schriftgröße ist.«

Übersetzte Zusammenfassung eines Teils der Antwort von Jukka K. Korpela auf die Frage »EM's for line-height« auf Stack Overflow.

Übersetzte Zusammenfassung eines Teils der Antwort von Jukka K. Korpela auf die Frage »EM's for line-height« auf Stack Overflow.

Kurz gesagt: Nutzt Zeilenhöhen ohne Einheit.

Problem mit Zeilenhöhen ohne Einheit und die Lösung

Ich hatte ja bereits alles mit rem angelegt. Nun wollte ich mal eben die rem-Zeilenhöhen in die entsprechenden Werte ohne Einheit umrechnen, und das war gar nicht mal so einfach – die Berechnungen sind dafür ein wenig komplexer als mit rem oder em …

Das Ergebnis meiner Überlegungen ist folgende SASS-Funktion:

@function line-height($font-size, $ratio-to-base-line-height, $base-line-height: $line-height, $relative-base-font-size: 1) {
    $abs-base-font-size: $relative-base-font-size * 16;
    $line-height: $base-line-height * $ratio-to-base-line-height;
    @return ($relative-base-font-size * $abs-base-font-size * $line-height) / ($font-size * $abs-base-font-size);
}
Code-Sprache: SCSS (scss)

Ihr müsst der Funktion die relative Schriftgröße des Elements übergeben, das Verhältnis der gewünschten Zeilenhöhe zur Grundzeilenhöhe, die Grundzeilenhöhe sowie die relative Basisschriftgröße (standardmäßig auf 1 gesetzt). Die Funktion rechnet euch dann die entsprechende Zeilenhöhe ohne Einheit aus und gibt sie zurück.

Ein Beispiel

Wir haben folgende Ausgangslage:

h1 {
    font-size: 1.802em;
    line-height: 2.1rem;
}
Code-Sprache: CSS (css)

Die Zeilenhöhe des html-Elements beträgt 1.4rem, wir möchten also die eineinhalbfache Zeilenhöhe für das h1-Element.

Wenn wir die Funktion nutzen, sieht das so aus:

h1 {
    font-size: 1.802em;
    line-height: line-height(1.802, 1.5, 1.4); /* returns 1.24861 */
}
Code-Sprache: SCSS (scss)

So bekommen wir den entsprechenden Wert ohne Einheit und können uns über eine flexiblere Angabe für die Zeilenhöhe freuen.