Html: Перевод px в rem

SASS: Программирование 20 сообщений
Обновлено: 04 мая, 12:07
186
Студентов
82%
Завершения

При использовании единиц измерения rem верстальщики зачастую выставляют базовый размер шрифта, равный 10 пикселям. В таком случае всё сводится к простым вычислениям, для которых не нужен калькулятор:

  • 10px -> 1rem
  • 23px -> 2.3rem

и так далее.

Такой подход хоть и имеет право на существование, но связан с одной проблемой: браузеры позволяют выставлять минимальный размер шрифта в своих настройках. При этом он выставляется не для тега html, что позволило бы пересчитать все единицы rem на странице, а просто насильно увеличивается размер шрифта. Это приводит к порой страшным результатам, особенно, если стоит не стандартное значение свойства line-height. Слипшиеся строки вам гарантированы.

Если мы всё же хотим использовать единицы rem и при этом высчитывать значения от реального базового размера шрифта, то нам понадобится конвертер px в rem.

В этом задании вам необходимо написать функцию px-to-rem, которая принимает на вход значения в пикселях, а на выходе возвращает значение в rem. На вход функции может поступать любое количество значений, разделённых пробелом. Это позволит писать адекватный SASS код в тех свойствах, где может быть не одно значение.

Возвращённое значение из функции обязательно должно быть в виде строки. Это позволит при любом наборе данных иметь на выходе значения, которые имеют одинаковый тип данных.

Примеры

$rem-base: 16px;

.px-20 {
  padding-left: px-to-rem(20px);
  padding-right: px-to-rem(20px);
}

.card {
  padding: px-to-rem(20px 15px 30px 45px);
}

После компиляции должен получится следующий CSS код:

.px-20 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.card {
  padding: 1.25rem 0.9375rem 1.875rem 2.8125rem;
}

Подсказки

  • Для перевода значения в строку можно воспользоваться интерполяцией.
  • Для деления используйте функции math.div() из пространства sass:math. Само пространство уже подключено в файле app.scss

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Впечатления

Аватар пользователя Kirill Kozedub
Kirill Kozedub 26 мая 2021

Интерполяция!!! Как же я сразу не догадался, что она может сделать из списка строку! Когда тесты сказали, что нужен не список, а строка - пришлось постараться, чтобы избавиться от лишних пробелов, но в итоге у меня получилось

Никита, спасибо за интересное испытание!