Wir haben über "Warum Ems?" hier zuvor.
Für diejenigen, die neu bei em sind, leistet das Mozilla Developer Network hervorragende Arbeit bei der Erklärung von ems:
… Ein em entspricht der Größe der Schriftart, die für das übergeordnete Element des betreffenden Elements gilt. Wenn Sie die Schriftgröße nirgendwo auf der Seite festgelegt haben, ist dies die Standardeinstellung des Browsers, die wahrscheinlich 16 Pixel beträgt. Standardmäßig ist 1em = 16px und 2em = 32px.
Wenn Sie immer noch lieber in px denken, aber wie die Vorteile von em, Ihren Taschenrechner nicht zur Hand haben müssen, können Sie Sass die Arbeit für Sie erledigen lassen. Es gibt verschiedene Möglichkeiten, ems mit Sass zu berechnen.
Inline-Mathematik:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Hinweis: Wir benötigen dort das "* 1em", damit Sass den Einheitenwert korrekt anfügt. Sie können für den gleichen Zweck auch "+ 0em" verwenden.
Ergebnis:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Das funktioniert, aber wir können es einfacher machen.
Die Funktion em () Sass
Es gibt viele verschiedene Möglichkeiten, diese Funktion zu schreiben, diese aus einem Artikel der Web Design Weekly:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super schlau! Diese Funktion verwendet die String-Interpolation von Sass, um sie an den Wert anzuhängen. Beachten Sie, dass der Parameter $ context den Standardwert $ browser-context hat (unabhängig davon, auf was Sie diese Variable setzen). Dies bedeutet, dass Sie beim Aufrufen der Funktion in Ihrem Sass nur den $pixelsWert definieren müssen und die Mathematik relativ zu $browser-context- in diesem Fall - 16px berechnet wird.
Anwendungsbeispiel:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Ergebnis:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Eine ähnliche Funktion, die Mathematik anstelle der Zeichenfolgeninterpolation von The Sass Way verwendet, kann leicht geändert werden, um Variablen wie unsere Zeichenfolgeninterpolationsfunktion zu akzeptieren:
//un-modified @function calc-em($target-px, $context) ( @return ($target-px / $context) * 1em; ) // and modified to accept a base context variable $browser-context: 16; @function em($pixels, $context: $browser-context) ( @return ($pixels / $context) * 1em; )Eine andere, die die unitless () -Methode von Sass verwendet:
$browser-context: 16; @function em($pixels, $context: $browser-context) ( @if (unitless($pixels)) ( $pixels: $pixels * 1px; ) @if (unitless($context)) ( $context: $context * 1px; ) @return $pixels / $context * 1em; )Dies ermöglicht es uns, entweder die px-Einheit in den Funktionsaufruf einzubeziehen oder nicht.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )