Pogovarjali smo se o tem "Zakaj Ems?" tukaj prej.
Za nove uporabnike vrednot mreža Mozilla Developer Network odlično razloži ems:
… Em je enak velikosti pisave, ki velja za nadrejeni element. Če nikjer na strani niste nastavili velikosti pisave, je to privzeti brskalnik, ki je verjetno 16 slikovnih pik. Torej, privzeto 1em = 16px in 2em = 32px.
Če še vedno raje razmišljate v slikovnih pikah, vendar vam, tako kot prednosti em, kalkulator ni pri roki, lahko Sass dovolite, da delo opravi namesto vas. Obstajajo različni načini za izračun emsov s Sassom.
Vstavljena matematika:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Opomba: Tam potrebujemo “* 1em”, da bo Sass pravilno dodal vrednost enote. Za isti namen lahko uporabite tudi "+ 0em".
Rezultat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )To deluje, vendar si lahko olajšamo.
Funkcija em () Sass
Obstaja kar nekaj različnih načinov za pisanje te funkcije, in sicer ta iz članka Tedenskega spletnega oblikovanja:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super pametno! Ta funkcija uporablja Sassovo interpolacijo nizov, da jih doda vrednosti. Upoštevajte, da ima parameter $ context privzeto vrednost $ browser-context (torej, na kar koli nastavite to spremenljivko). To pomeni, da morate med klicanjem funkcije v Sassu določiti le $pixelsvrednost in matematika bo izračunana glede na $browser-context- v tem primeru - 16 slikovnih pik.
Primer uporabe:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Rezultat:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Podobno funkcijo, ki uporablja matematiko namesto interpolacije nizov iz The Sass Way, lahko enostavno spremenimo tako, da sprejema spremenljivke, kot je naša funkcija interpolacije nizov:
//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; )Druga, ki uporablja Sassovo metodo 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 nam omogoča, da v klic funkcije vključimo enoto px ali ne.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )