Функции Px to Em онлайн урок.


Мы говорили о «Почему Эмс?» здесь раньше.

Для тех новых значений em, Сеть разработчиков Mozilla отлично справляется с объяснением ems:

... em равно размеру шрифта, который применяется к родительскому элементу рассматриваемого элемента. Если вы не задали размер шрифта в любом месте страницы, то это браузер по умолчанию, который, вероятно, 16 пикселей. Итак, по умолчанию 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

Существует довольно много разных способов записи этой функции, из нее Веб-дизайн Weekly article:

$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
@return #{$pixels/$context}em;
}

Супер умный! Эта функция использует строчную интерполяцию Sass для добавления em к значению. Обратите внимание, что параметр $ context имеет значение по умолчанию $ browser-context (так что независимо от того, что вы установите для этой переменной). Это означает, что при вызове функции в вашем Sass вам нужно только определить значение$ пикселей, и математика будет вычисляться относительно$ 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);
}