Schriftgrößen mit .less dynamisch berechnen

Whiteboard

Dieser kleine Kniff erleichtert das Arbeiten mit Schriftgrößen in .less. Vor allen wenn viele Schriftgrößen basierend auf einem Basiswert (z.B.: 15px) dynamisch berechnet werden, verbessert diese Art der Notation die Lesbarkeit deutlich.

Ich stolpere häufig über diese oder ähnliche Zeilen mittels denen die Ziel-Schriftgröße „22px“ dynamisch berechnet wird:

h1 {
     font-size: @font-size-base * 1,466666666666667; // 22px
 }

Die Schriftgröße wird hier mit dem Multiplikator der sich aus 22/15 = 1,466666666666667 ergibt multipliziert. Funktioniert, ist aber erstens aufwendig da man für jede Schriftgröße den Multiplikator händisch berechnen muss und zweitens nur schwer lesbar, sollte rechts daneben der Kommentar mal fehlen oder falsch sein. Ein wesentlich eleganterer Weg ist es die Berechnung gleich von .less durchführen zu lassen:

h1 {
     font-size: @font-size-base *(22/@font-size-base); // 22px;
 }

Nun erkennt man auf einen Blick welche Schriftgröße berechnet wird und spart sich auch das manuelle Rechnen. Nur ein kleiner und simpler Kniff den ich in den letzten Monaten allerdings wirklich zu schätzen gelernt habe.

Kommentar verfassen

Folge mir auf Twitter

Hol Dir kostenlos Tipps und Tricks zu Shopware, E-Commerce und andere Open-Source Produkte.

Folge @synonymousrocks