Говорили сме за „Защо Ems?“ тук преди.
За тези, които нямат нови ценности, мрежата за разработчици Mozilla се справя отлично с обяснението на ems:
... em е равен на размера на шрифта, който се отнася за родителя на въпросния елемент. Ако не сте задали размера на шрифта никъде на страницата, това е браузърът по подразбиране, който вероятно е 16px. И така, по подразбиране 1em = 16px и 2em = 32px.
Ако все пак предпочитате да мислите в px, но подобно на предимствата на em, няма нужда да имате удобен калкулатора си, можете да оставите Sass да свърши работата вместо вас. Има различни начини за изчисляване на ems с Sass.
Вградена математика:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Забележка: Имаме нужда от „* 1em“ там, за да може Sass да добави правилно единичната стойност. Можете също да използвате “+ 0em” за същата цел.
Резултат:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Това работи, но можем да го улесним.
Функцията em () Sass
Има доста различни начини да напишете тази функция, тази от седмична статия за уеб дизайн:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Супер умно! Тази функция използва интерполация на низове на Sass, за да ги добави към стойността. Обърнете внимание, че параметърът $ context има стойност по подразбиране $ browser-context (така, каквото и да зададете тази променлива). Това означава, че когато извиквате функцията във вашия Sass, трябва само да дефинирате $pixelsстойността и математиката ще бъде изчислена спрямо $browser-context- в този случай - 16px.
Пример за използване:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Резултат:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Подобна функция, използваща математика вместо интерполация на низове от The Sass Way, може лесно да бъде модифицирана, за да приема променливи като нашата функция за интерполация на низове:
//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; )Друг, използващ Sass '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; )Това ни позволява или да включим px единицата, или не във функционното повикване.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )