Razgovarali smo o "Zašto Ems?" ovdje prije.
Za one koji su novi u em vrijednostima, Mozilla Developer Network izvrsno objašnjava ems:
… Em je jednaka veličini fonta koja se odnosi na nadređenog elementa o kojem je riječ. Ako nigdje na stranici niste postavili veličinu fonta, tada je to zadani preglednik, koji je vjerojatno 16 piksela. Dakle, prema zadanim postavkama 1em = 16px, a 2em = 32px.
Ako i dalje više volite razmišljati u px-u, ali poput blagodati em, nema potrebe da vam kalkulator bude pri ruci, možete pustiti da Sass radi posao umjesto vas. Postoje različiti načini za izračunavanje ems-a sa Sassom.
Ugrađena matematika:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Napomena: Tamo nam treba "* 1em" da bi Sass ispravno dodao jediničnu vrijednost. U istu svrhu možete koristiti i "+ 0em".
Proizlaziti:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Ovo djeluje, ali to možemo olakšati.
Funkcija em () Sass
Postoji nekoliko različitih načina za pisanje ove funkcije, ovaj iz članka Tjedni web dizajn:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super pametno! Ova funkcija koristi Sassovu interpolaciju niza za dodavanje vrijednosti. Imajte na umu da parametar $ context ima zadanu vrijednost $ browser-context (dakle, na sve što postavite ovu varijablu). To znači da prilikom pozivanja funkcije u vašem Sass-u trebate samo definirati $pixelsvrijednost i matematika će se izračunati u odnosu na $browser-context- u ovom slučaju - 16 piksela.
Primjer upotrebe:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Proizlaziti:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Slična funkcija koja koristi matematiku umjesto interpolacije niza iz The Sass Way lako se može izmijeniti kako bi prihvatila varijable poput naše funkcije interpolacije niza:
//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; )Drugi koji koristi Sassovu metodu 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 omogućuje da uključimo px jedinicu ili ne u poziv funkcije.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )