Ми говорили про "Чому Ems?" тут раніше.
Для тих, хто новачок у em values, Мережа розробників Mozilla чудово справляється з поясненням ems:
… Em дорівнює розміру шрифту, який застосовується до батьківського елемента, про який йде мова. Якщо ви не встановили розмір шрифту ніде на сторінці, це браузер за замовчуванням, який, ймовірно, становить 16 пікселів. Отже, за замовчуванням 1em = 16px, а 2em = 32px.
Якщо ви все-таки віддаєте перевагу мислити в пікселях, але, як і переваги em, калькулятор вам не потрібен, ви можете дозволити Сассу зробити роботу за вас. Існує безліч способів обчислення ems за допомогою Sass.
Вбудована математика:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Примітка: Нам потрібен “* 1em” там, щоб Сасс правильно додав одиничне значення. Ви також можете використовувати “+ 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; )Супер розумний! Ця функція використовує інтерполяцію рядка Сасса, щоб додати їх до значення. Зверніть увагу, що параметр $ 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; )Подібну функцію із використанням математики замість інтерполяції рядків від 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); )