Px-zu-Em-Funktionen

Wir haben hier schon mal über „Warum Ems?“ gesprochen.

Für Neulinge bei em-Werten erklärt Das Mozilla Developer Network ems hervorragend

…ein em entspricht der Schriftgröße, die auf das übergeordnete Element des betreffenden Elements angewendet wird. Wenn Sie die Schriftgröße auf der Seite nirgendwo festgelegt haben, dann ist es die Standardeinstellung des Browsers, die wahrscheinlich 16px beträgt. Standardmäßig ist also 1em = 16px und 2em = 32px.

Wenn Sie immer noch lieber in px denken, aber die Vorteile von em mögen, brauchen Sie keinen Taschenrechner zur Hand zu haben, Sie können Sass die Arbeit für Sie erledigen lassen. Es gibt eine Vielzahl von Möglichkeiten, ems mit Sass zu berechnen.

Inline-Mathematik

h1 {
  font-size: (32 / 16) * 1em;
}

p {
  font-size: (14 / 16) + 0em;
}

Hinweis: Wir brauchen das „* 1em“ dort, damit Sass den Einheitenwert korrekt anhängt. Sie können auch „+ 0em“ für denselben Zweck verwenden.

Ergebnis

h1 {
  font-size: 2em;
}

p {
  font-size: 0.875em;
}

Das funktioniert, aber wir können es einfacher machen.

Die em()-Sass-Funktion

Es gibt ziemlich viele verschiedene Möglichkeiten, diese Funktion zu schreiben, diese hier aus einem Web Design Weekly-Artikel

$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em;
}

Super clever! Diese Funktion verwendet die String-Interpolation von Sass, um em an den Wert anzuhängen. Beachten Sie, dass der $context-Parameter einen Standardwert von $browser-context hat (also, was auch immer Sie diese Variable setzen). Das bedeutet, dass Sie beim Aufruf der Funktion in Ihrem Sass nur den $pixels-Wert angeben müssen und die Berechnung relativ zu $browser-context erfolgt – in diesem Fall 16px.

Beispielhafte Verwendung

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 von String-Interpolation verwendet, aus The Sass Way, kann leicht modifiziert werden, um Variablen wie unsere String-Interpolationsfunktion 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 weitere, 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 erlaubt uns, die px-Einheit entweder im Funktionsaufruf einzuschließen oder nicht.

h1 {
  font-size: em(32);
}

// is the same as:

h1 {
  font-size: em(32px);
}