Oleme rääkinud teemal "Miks Ems?" siin enne.
Neile uutele väärtustele pakub Mozilla arendajavõrgustik suurepärast tööd nende selgitamiseks:
... em on võrdne fondi suurusega, mis kehtib kõnealuse elemendi vanema kohta. Kui te pole lehe kusagil fondi suurust määranud, on see brauseri vaikimisi, mis on tõenäoliselt 16px. Nii et vaikimisi 1em = 16px ja 2em = 32px.
Kui eelistate ikkagi mõelda pikslites, kuid nagu ka nende eelised, pole ka teie kalkulaatoril käepärast, võite lasta Sassil selle töö enda eest ära teha. Emsi arvutamiseks Sassiga on erinevaid viise.
Sisemine matemaatika:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Märkus. Vajame seal „* 1em”, et Sass ühiku väärtuse õigesti lisaks. Samal eesmärgil saate kasutada ka märki „+ 0em”.
Tulemus:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )See töötab, kuid saame selle lihtsamaks teha.
Funktsioon em () Sass
Selle funktsiooni kirjutamiseks on üsna palju erinevaid viise, see on Web Design Weekly artiklist:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super nutikas! See funktsioon kasutab Sassi stringide interpoleerimist nende lisamiseks väärtusele. Pange tähele, et parameetri $ context vaikeväärtuseks on $ brauseri-context (nii, ükskõik milleks te selle muutuja määrate). See tähendab, et oma Sassi funktsiooni kutsumisel peate määrama ainult $pixelsväärtuse ja matemaatika arvutatakse $browser-context16px suhtes.
Kasutamise näide:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Tulemus:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Sarnast funktsiooni, mis kasutab matemaatikat Sass Way'i stringide interpoleerimise asemel, saab hõlpsasti muuta, et aktsepteerida muutujaid nagu meie stringide interpolatsiooni funktsioon:
//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; )Teine, mis kasutab Sassi meetodit 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; )See võimaldab meil funktsioonikõnesse lisada px-üksuse või mitte.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )