We hebben het gehad over "Waarom Ems?" hier eerder.
Voor degenen die nieuw zijn in em-waarden: The Mozilla Developer Network legt ems uitstekend uit:
… Een em is gelijk aan de grootte van het lettertype dat van toepassing is op de ouder van het betreffende element. Als je de lettergrootte nergens op de pagina hebt ingesteld, is dit de standaardbrowser, die waarschijnlijk 16px is. Dus standaard 1em = 16px en 2em = 32px.
Als je nog steeds liever in px denkt, maar de voordelen ervan leuk vindt, hoef je je rekenmachine niet bij de hand te hebben, dan kun je Sass het werk voor je laten doen. Er zijn verschillende manieren om ems met Sass te berekenen.
Inline wiskunde:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Opmerking: We hebben de "* 1em" daar nodig zodat Sass de eenheidswaarde correct kan toevoegen. U kunt voor hetzelfde doel ook "+ 0em" gebruiken.
Resultaat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Dit werkt, maar we kunnen het gemakkelijker maken.
De em () Sass-functie
Er zijn nogal wat verschillende manieren om deze functie te schrijven, deze uit een Web Design Weekly-artikel:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super slim! Deze functie gebruikt de stringinterpolatie van Sass om em aan de waarde toe te voegen. Merk op dat de parameter $ context de standaardwaarde $ browser-context heeft (dus, waar je deze variabele ook op instelt). Dit betekent dat wanneer u de functie in uw Sass aanroept, u alleen de $pixelswaarde hoeft te definiëren en de wiskunde wordt berekend ten opzichte van $browser-context- in dit geval - 16px.
Voorbeeldgebruik:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Resultaat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Een vergelijkbare functie die wiskunde gebruikt in plaats van stringinterpolatie van The Sass Way kan eenvoudig worden aangepast om variabelen zoals onze stringinterpolatiefunctie te accepteren:
//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; )Een andere die de methode unitless () van Sass gebruikt:
$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; )Hierdoor kunnen we de px-eenheid wel of niet opnemen in de functieaanroep.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )