Vi har snakket om "Why Ems?" her før.
For de som er nye for emverdier, gjør Mozilla Developer Network en utmerket jobb med å forklare ems:
... en em er lik størrelsen på skriften som gjelder forelderen til det aktuelle elementet. Hvis du ikke har angitt skriftstørrelsen noe sted på siden, er det nettleserens standard, som sannsynligvis er 16 piksler. Så, som standard 1em = 16px, og 2em = 32px.
Hvis du fremdeles foretrekker å tenke i px, men som fordelene med dem, trenger du ikke ha kalkulatoren din hendig, du kan la Sass gjøre jobben for deg. Det er en rekke måter å beregne ems med Sass.
Inline matematikk:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Merk: Vi trenger "* 1em" der for at Sass skal tilføye enhetsverdien riktig. Du kan også bruke “+ 0em” til samme formål.
Resultat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Dette fungerer, men vi kan gjøre det lettere.
Em () Sass-funksjonen
Det er mange forskjellige måter å skrive denne funksjonen på, denne fra en Web Design Weekly-artikkel:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super smart! Denne funksjonen bruker Sass 'strenginterpolasjon for å legge dem til verdien. Merk at $ kontekstparameteren har en standardverdi på $ nettleserkontekst (så uansett hva du setter denne variabelen til). Dette betyr at når du ringer til funksjonen i Sass, trenger du bare å definere $pixelsverdien, og matematikken blir beregnet i forhold til $browser-context- i dette tilfellet - 16 piksler.
Eksempel på bruk:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Resultat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )En lignende funksjon som bruker matematikk i stedet for strenginterpolering fra The Sass Way, kan enkelt endres for å akseptere variabler som vår strenginterpolasjonsfunksjon:
//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 annen som bruker 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 lar oss enten inkludere px-enheten eller ikke i funksjonsanropet.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )