Vi har talt om "Hvorfor Ems?" her før.
For de nye em-værdier gør Mozilla Developer Network et fremragende stykke arbejde med at forklare ems:
… En em er lig med størrelsen på den skrifttype, der gælder for forældrene til det pågældende element. Hvis du ikke har indstillet skriftstørrelsen nogen steder på siden, er det browserens standard, som sandsynligvis er 16 pixel. Så som standard er 1em = 16px og 2em = 32px.
Hvis du stadig foretrækker at tænke i px, men ligesom fordelene ved em, behøver ikke din lommeregner være praktisk, du kan lade Sass gøre arbejdet for dig. Der er forskellige måder at beregne ems med Sass på.
Inline matematik:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Bemærk: Vi har brug for "* 1em" der for at Sass skal tilføje enhedsværdien korrekt. Du kan også bruge “+ 0em” til samme formål.
Resultat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Dette fungerer, men vi kan gøre det lettere.
Em () Sass-funktionen
Der er en hel række forskellige måder at skrive denne funktion på, denne fra en Web Design Weekly-artikel:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super smart! Denne funktion bruger Sass 'strenginterpolation til at føje dem til værdien. Bemærk, at $ kontekstparameteren har en standardværdi på $ browser-kontekst (så uanset hvad du indstiller denne variabel til). Dette betyder, at når du kalder funktionen i din Sass, behøver du kun at definere $pixelsværdien, og matematikken beregnes i forhold til $browser-context- i dette tilfælde - 16 pixel.
Eksempel på anvendelse:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Resultat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )En lignende funktion, der bruger matematik i stedet for strenginterpolering fra The Sass Way, kan let ændres for at acceptere variabler som vores strenginterpolationsfunktion:
//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; )En anden ved hjælp af Sass 'unitless () metode:
$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; )Dette giver os mulighed for enten at inkludere px-enheden eller ikke i funktionsopkaldet.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )