Mluvili jsme o tom „Proč Ems?“ tady předtím.
Pokud jde o nové hodnoty em, Mozilla Developer Network výborně vysvětluje ems:
… Em se rovná velikosti písma, které se vztahuje na nadřazený prvek daného prvku. Pokud jste nikde na stránce nenastavili velikost písma, jedná se o výchozí nastavení prohlížeče, které je pravděpodobně 16px. Standardně tedy 1em = 16px a 2em = 32px.
Pokud stále dáváte přednost přemýšlení v pixelech, ale stejně jako výhody em, nemusíte mít po ruce svou kalkulačku, můžete nechat Sass, aby za vás udělal práci. Existuje mnoho způsobů, jak vypočítat ems pomocí Sass.
Vložená matematika:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Poznámka: Aby Sass správně připojil hodnotu jednotky, potřebujeme tam „* 1em“. Pro stejný účel můžete také použít „+ 0em“.
Výsledek:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )To funguje, ale můžeme to usnadnit.
Funkce em () Sass
Tuto funkci lze napsat několika způsoby, například z článku o Web Design Weekly:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super chytrý! Tato funkce používá Sassovu interpolaci řetězců k přidání hodnoty k hodnotě. Všimněte si, že parametr $ context má výchozí hodnotu $ browser-context (tedy bez ohledu na to, na co tuto proměnnou nastavíte). To znamená, že při volání funkce ve vašem Sass stačí definovat $pixelshodnotu a matematika bude vypočítána relativně k $browser-context- v tomto případě - 16px.
Příklad použití:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Výsledek:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Podobnou funkci používající matematiku namísto interpolace řetězců z The Sass Way lze snadno upravit tak, aby přijímala proměnné, jako je naše funkce interpolace řetězců:
//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; )Jiný, který používá 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 nám umožňuje buď zahrnout jednotku px, nebo ne do volání funkce.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )