Mes kalbėjome apie „Kodėl Ems?“ čia anksčiau.
Tiems, kurie turi naujų vertybių, „Mozilla“ kūrėjų tinklas puikiai paaiškina:
... em yra lygus šrifto dydžiui, kuris taikomas atitinkamo elemento tėvams. Jei niekur puslapyje nenustatėte šrifto dydžio, tai yra numatytoji naršyklė, kuri tikriausiai yra 16 taškų. Taigi, pagal numatytuosius nustatymus 1em = 16px ir 2em = 32px.
Jei vis tiek norite galvoti pikseliais, bet, kaip ir „EM“ pranašumai, nereikia, kad jūsų skaičiuoklė būtų paranki, galite leisti „Sass“ atlikti darbą už jus. Yra daugybė būdų, kaip apskaičiuoti emus naudojant „Sass“.
Įterpta matematika:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Pastaba: Mums reikia „* 1em“, kad „Sass“ teisingai pridėtų vieneto vertę. Tam pačiam tikslui taip pat galite naudoti „+ 0em“.
Rezultatas:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Tai veikia, bet mes galime tai padaryti lengviau.
„Em“ (Sass) funkcija
Yra nemažai skirtingų būdų, kaip parašyti šią funkciją, šį iš „Web Design Weekly“ straipsnio:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super protingas! Ši funkcija naudoja Sasso eilutės interpoliaciją, kad pridėtų jas prie vertės. Atminkite, kad parametro $ context numatytoji vertė yra $ browser-context (taigi, kad ir ką nustatytumėte šį kintamąjį į). Tai reiškia, kad kviečiant funkciją „Sass“, jums reikia tik apibrėžti $pixelsvertę ir matematika bus apskaičiuota atsižvelgiant į $browser-context- šiuo atveju - 16 taškų.
Naudojimo pavyzdys:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Rezultatas:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Panašią funkciją, naudojančią matematiką, o ne „Sass Way“ stygų interpoliaciją, galima lengvai modifikuoti, kad būtų priimti tokie kintamieji, kaip mūsų eilutės interpoliacijos funkcija:
//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; )Kitas naudojant „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; )Tai leidžia į funkcijų iškvietimą įtraukti px vienetą arba ne.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )