Vi har pratat om "Varför Ems?" här innan.
För de nya värdena, gör Mozilla Developer Network ett utmärkt jobb med att förklara ems:
... en em är lika med storleken på teckensnittet som gäller föräldern till det aktuella elementet. Om du inte har ställt in teckensnittsstorlek någonstans på sidan är det webbläsarens standard, vilket förmodligen är 16 pixlar. Så som standard är 1em = 16px och 2em = 32px.
Om du ändå föredrar att tänka i px, men som fördelarna med em, behöver du inte ha din räknare till hands, du kan låta Sass göra jobbet åt dig. Det finns olika sätt att beräkna ems med Sass.
Inline matematik:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Obs! Vi behöver "* 1em" där för att Sass ska kunna lägga till enhetsvärdet korrekt. Du kan också använda “+ 0em” för samma ändamål.
Resultat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Detta fungerar, men vi kan göra det lättare.
Em () Sass-funktionen
Det finns en hel del olika sätt att skriva denna funktion, det här från en artikel om webbdesign varje vecka:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super smart! Denna funktion använder Sass stränginterpolering för att lägga till dem till värdet. Observera att $ context-parametern har ett standardvärde på $ browser-context (så vad du än ställer in denna variabel till). Det betyder att när du ringer till funktionen i din Sass behöver du bara definiera $pixelsvärdet och matematiken beräknas i förhållande till $browser-context- i det här fallet - 16 pixlar.
Exempel på användning:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Resultat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )En liknande funktion som använder matematik istället för stränginterpolering från The Sass Way kan enkelt modifieras för att acceptera variabler som vår stränginterpolationsfunktion:
//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 annan med Sass 'unitless () -metod:
$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; )Detta gör att vi antingen kan inkludera px-enheten eller inte i funktionsanropet.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )