Beszéltünk arról, hogy "Miért Ems?" itt korábban.
Az új értékek számára a Mozilla Developer Network kiváló munkát végez az EMS magyarázatával:
… Egy em egyenlő a betűkészlet méretével, amely a kérdéses elem szülőjére vonatkozik. Ha még nem állította be a betűméretet az oldalon, akkor ez a böngésző alapértelmezett értéke, amely valószínűleg 16 képpontos. Tehát alapértelmezés szerint 1em = 16px és 2em = 32px.
Ha továbbra is inkább px-ben gondolkodik, de hasonlóan az előnyeihez, a számológépének sem kell kéznél lennie, akkor hagyhatja, hogy a Sass elvégezze helyetted a munkát. Számos módon lehet kiszámolni az em-eket a Sass-szal.
Szöveges matematika:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Megjegyzés: Szükségünk van a „* 1em” -re, hogy a Sass helyesen csatolja az egység értékét. Ugyanarra a célra használhatja a „+ 0em” -t is.
Eredmény:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Ez működik, de megkönnyíthetjük.
Az em () Sass függvény
Ennek a függvénynek a megírásához elég sokféle módszer létezik, ez a Web Design Weekly cikkből:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Szuper okos! Ez a függvény Sass karakterlánc-interpolációjával egészíti ki őket az értékhez. Ne feledje, hogy a $ context paraméter alapértelmezett értéke a $ browser-context (tehát bármi is legyen ez a változó). Ez azt jelenti, hogy a függvény meghívásakor a Sass-ban csak meg kell határoznia az $pixelsértéket, és a matematika kiszámításra kerül $browser-context- ebben az esetben - 16 képpont.
Példa felhasználásra:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Eredmény:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )A Sass Way karakterlánc-interpolációja helyett matematikát használó hasonló függvény könnyen módosítható olyan változók elfogadására, mint a karakterlánc-interpolációs függvényünk:
//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; )Egy másik Sass 'unitless () módszerrel:
$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; )Ez lehetővé teszi számunkra, hogy a px egységet felvegyük a függvényhívásba, vagy ne.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )