Мы говорили о том, «Почему Эмс?» здесь раньше.
Для новичков в значениях em сеть разработчиков Mozilla отлично справляется с объяснением ems:
… Em равно размеру шрифта, который применяется к родительскому элементу рассматриваемого элемента. Если вы не установили размер шрифта где-либо на странице, то это значение по умолчанию для браузера, вероятно, 16 пикселей. Итак, по умолчанию 1em = 16px, а 2em = 32px.
Если вы по-прежнему предпочитаете думать в пикселях, но, как и их преимущества, вам не нужно иметь под рукой калькулятор, вы можете позволить Sass сделать всю работу за вас. Существует множество способов расчета em с помощью 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
Есть довольно много разных способов написать эту функцию, это из статьи Web Design Weekly:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Супер умно! Эта функция использует строковую интерполяцию Sass для добавления em к значению. Обратите внимание, что параметр $ context имеет значение по умолчанию $ browser-context (так что, как бы вы ни установили эту переменную). Это означает, что при вызове функции в вашем Sass вам нужно только определить $pixelsзначение, и математика будет вычисляться относительно $browser-context- в данном случае - 16 пикселей.
Пример использования:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Результат:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Аналогичную функцию, использующую математику вместо интерполяции строк из 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); )