Hovorili sme o tom „Prečo Ems?“ tu predtým.
Pre tieto nové hodnoty em je Mozilla Developer Network vynikajúcou úlohou pri vysvetľovaní ems:
... em sa rovná veľkosti písma, ktoré sa vzťahuje na nadradenú časť predmetného prvku. Ak ste nikde na stránke nenastavili veľkosť písma, potom je to predvolený prehľadávač, ktorý má pravdepodobne 16 pixlov. Takže predvolene 1em = 16px a 2em = 32px.
Ak stále radšej myslíte v pixeloch, ale rovnako ako ich výhody, nemusíte mať po ruke svoju kalkulačku, môžete nechať Sass, aby za vás urobil prácu. Existuje mnoho spôsobov, ako vypočítať ems pomocou Sass.
Vložená matematika:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Poznámka: Aby Sass správne pripojil jednotkovú hodnotu, potrebujeme tam „* 1em“. Na ten istý účel môžete použiť aj znak „+ 0em“.
Výsledok:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Toto funguje, ale môžeme to uľahčiť.
Funkcia em () Sass
Existuje pomerne veľa rôznych spôsobov, ako napísať túto funkciu, tento z článku Web Design Weekly:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super šikovný! Táto funkcia používa Sassovu interpoláciu reťazcov na ich pridanie k hodnote. Upozorňujeme, že parameter $ context má predvolenú hodnotu $ browser-context (teda bez ohľadu na to, na čo túto premennú nastavíte). To znamená, že pri volaní funkcie na vašom Sass stačí definovať $pixelshodnotu a matematika sa bude počítať vzhľadom na $browser-context- v tomto prípade - 16px.
Príklad použitia:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Výsledok:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Podobnú funkciu používajúcu matematiku namiesto interpolácie reťazcov z aplikácie The Sass Way možno ľahko upraviť tak, aby prijímala premenné, ako je naša funkcia interpolácie reťazcov:
//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; )Iný, ktorý používa Sassovu metódu unitless ():
$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; )To nám umožňuje do volania funkcie zahrnúť jednotku px alebo nie.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )