Unit Forge — конвертер единиц измерения для CSS

Когда вёрстка переходит на относительные единицы, в рабочем процессе появляется одно постоянное рутинное действие: взять пиксельное значение из макета и перевести его в rem, em или vw. Одно значение — секунда с калькулятором. Десять значений — уже раздражение. Целый CSS-файл из чужого проекта — потеря часа.

Но дело не только в арифметике. Перед конвертацией нужно знать контекст: какой корневой шрифт у проекта, какой родительский, какой вьюпорт. При работе с calc() нужно думать: какие единицы внутри выражения конвертировать, а какие намеренны — 100% это не то же самое, что 100px. При работе с SCSS-файлом нужно не сломать медиазапросы и не тронуть border: 1px solid, который в пикселях стоит специально.

Unit Forge — это модуль на toolz.macrulez.ru, который убирает из этого процесса всё ручное: от одиночного перевода с форматированием до пакетной обработки файлов. Всё работает в браузере без отправки данных на сервер.

Контекст: основа для всех вычислений

Прежде чем что-то конвертировать, инструмент должен знать контекст. Он задаётся в боковой панели и влияет на все блоки сразу.

Корневой шрифт (Root font size)

Это основа для rem. По умолчанию браузеры используют 16px, и большинство проектов этого не меняют. Но есть исключения.

Пример: если root font size = 16px, то 24px → 1.5rem. Если root = 10px — распространённый трюк для упрощения расчётов, — то те же 24px → 2.4rem. Если root = 20px — 24px → 1.2rem.

Смена значения в поле пересчитывает все конвертеры и таблицу справочных значений мгновенно.

Родительский шрифт (Parent font size)

Нужен для единиц em и %. В отличие от rem, который всегда относится к корню документа, em зависит от того, где именно находится элемент: какой font-size у его родителя.

Если вёрстка предполагает, что элемент находится внутри контейнера с font-size: 14px — нужно задать это значение. Тогда 20px → 1.4286em (20 / 14), а не 1.25em (20 / 16).

Вьюпорт (Viewport width / height)

Основа для vw, vh, vmin, vmax. Влияет только на эти единицы.

При вьюпорте 1920×1080: 48px → 2.5vw (48 / 1920 × 100). При вьюпорте 375×812 (iPhone): те же 48px → 12.8vw. Разница существенная — поэтому смена пресета под мобильный вьюпорт может радикально изменить результаты при конвертации в vw.

Знаки после запятой

Контролирует точность всех чисел в результатах. При значении 4 получается 1.5625rem, при значении 2 — 1.56rem. Полезно менять: для быстрой оценки достаточно 2 знаков, для production-кода — 4.

Пресеты

Три кнопки быстро переключают комбинацию настроек под популярные фреймворки:

Мобильный пресет устанавливает parentFontSize = 14px — типичный базовый размер текста на мобильных устройствах. Это меняет результаты при конвертации в em и %.

Конвертер единиц

Самый базовый блок. Слева — поле ввода и выбор исходной единицы, справа — результат и целевая единица.

Поддерживаются все CSS-единицы без исключения:

Угловые единицы (deg → rad) и временны́е (ms → s) конвертируются по прямой математике без привязки к контексту. Разрешение нужно реже всего, но иногда — при работе с печатными стилями или @media (min-resolution: ...) — бывает нужно пересчитать dpi в dppx.

Умный ввод

Поле ввода понимает значения вместе с единицей. Если написать 24px — конвертер разберёт число и единицу, переключит селектор «из» на px и подставит 24. Это особенно удобно при копировании значений из DevTools или из Figma, где числа всегда идут с единицами.

Горячие клавиши

Ctrl+Shift+S — поменять единицы «из» и «в» местами. Полезно при обратной проверке: получили 1.5rem, хотим убедиться что это действительно 24px.

Alt+↑ / Alt+↓ — перебирать единицы «из» по полному списку без клика на селектор. Удобно при сравнении: как выглядит одно и то же значение в разных единицах.

Формат копирования

Под строкой результата — переключатель между тремя режимами копирования:

Значение — копируется просто 1.5rem. Подходит для вставки в уже написанное правило.

CSS-переменная — копируется --имя: 1.5rem;. Имя переменной редактируется прямо здесь: меняешь --value на --font-size-body — и в буфер уходит готовое объявление переменной.

CSS-свойство — копируется font-size: 1.5rem;. Свойство выбирается из выпадающего списка с полным набором CSS-свойств: margin, padding, width, height, gap, border-radius и другие. Выбрал padding, получил padding: 1.5rem; — и сразу вставляешь в стили.

Это экономит один шаг: не нужно писать имя свойства руками после вставки.

Таблица справочных значений

Рядом с основным конвертером — таблица из 28 популярных пиксельных значений с их эквивалентами в выбранной целевой единице. Набор выбран так, чтобы покрыть стандартную сетку отступов и размеров: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 96.

Таблица реагирует на все настройки контекста и на выбранную целевую единицу. Переключил «конвертировать в» с rem на vw — все 28 строк пересчитались под текущий вьюпорт. Поменял root font size — таблица для rem обновилась. Это работает как живой шпаргалка: можно быстро проверить, в какой rem-шаг попадает то или иное пиксельное значение в рамках конкретного проекта.

Клик по любой строке делает сразу три вещи: копирует результат в буфер, устанавливает это значение в основном конвертере и показывает всплывающее подтверждение. Удобно при последовательной работе с несколькими значениями — выбираешь из таблицы, результат уже в буфере.

Массовая конвертация

Когда значений много, вводить их по одному нет смысла. Блок массовой конвертации принимает произвольный текст в левое поле и разбирает все встреченные значения.

Режим значений (по умолчанию)

Инструмент находит в тексте все пары «число + единица» и конвертирует каждую. Формат ввода — произвольный:

Несколько значений в строку:      10px 16px 24px
Через запятую или точку с запятой: 16px; 1.5rem; 100%
Перемешанный текст:                padding: 24px, margin: 16px

Одинаковые значения дедуплицируются — если 16px встречается пять раз, в результате оно будет один раз. Это удобно при вставке куска кода: не нужно заранее чистить дубликаты.

Справа — результат в виде таблицы: исходное значение → конвертированное. Кнопка «Копировать всё» собирает все результаты через переносы строк.

Режим CSS-объявлений

Переключатель «Режим CSS-объявлений» меняет поведение: теперь блок обрабатывает полные CSS-правила, а не просто значения.

Вход:

font-size: 16px;
margin-top: 24px;
padding: 8px 16px;

Выход при конвертации в rem:

font-size: 1rem;
margin-top: 1.5rem;
padding: 0.5rem 1rem;

Правило с несколькими значениями (как padding: 8px 16px) обрабатывается целиком: каждый токен конвертируется отдельно, результат собирается обратно. Объявления, которые не удалось распознать, помечаются в результате отдельно — их легко найти и исправить вручную.

Генератор clamp()

Fluid-типографика и «жидкие» отступы требуют clamp(). Блок реализует два подхода к его генерации.

Простой режим

Три значения через запятую — минимум, идеальное и максимум. Значения могут быть в любых единицах, не обязательно одинаковых:

Ввод:  16px, 5vw, 24px

Инструмент конвертирует крайние значения в rem (опираясь на root font size), среднее — оставляет в vw, и собирает итоговое правило:

clamp(1rem, 5vw, 1.5rem)

Если значения введены в разных единицах — 1rem, 4vw, 2rem или 14px, 3vw, 20px — конвертация применяется к каждому согласно его типу. rem остаётся rem, px переводится, vw не трогается.

Кнопка «Копировать» сохраняет готовое CSS-выражение в буфер.

Fluid-режим

Более точный подход: задаются не три произвольных значения, а четыре параметра с конкретным физическим смыслом.

Инструмент вычисляет линейную интерполяцию между двумя точками и записывает её через clamp():

Мин. размер: 16px   Мин. вьюпорт: 320px
Макс. размер: 24px  Макс. вьюпорт: 1280px

Результат: clamp(1rem, 0.8333vw + 0.6667rem, 1.5rem)

Такое значение для font-size гарантирует: на экране 320px — ровно 16px, на 1280px — ровно 24px, между ними — плавное увеличение. Никаких медиазапросов, никакого скачка.

Все четыре поля опираются на текущий root font size из боковой панели. Если проект использует нестандартный корень — достаточно поменять одну настройку, и fluid-формула пересчитается автоматически.

Конвертер calc()

Выражения с calc() — это отдельный случай. Примитивный подход «заменить все числа с единицами» ломает смысл: calc(100% - 20px) превратится в calc(6.25rem - 1.25rem), и это неправильно — 100% здесь означает «весь родительский контейнер», а не 1600 пикселей.

Unit Forge решает эту проблему через явный выбор: какие единицы внутри выражения конвертировать, а какие оставить.

Как работает

При вводе выражения инструмент разбирает его и находит все единицы, которые встречаются внутри. Для каждой отображается чип — переключаемая кнопка:

Ввод: calc(100% - 20px)
Чипы: [%  □]  [px ✓]

Активные чипы (с галочкой) — конвертируются. Неактивные — остаются в исходном виде.

Умный предвыбор чипов

При обнаружении новых единиц инструмент автоматически решает, нужно ли их конвертировать:

Не конвертируются по умолчанию: %, vw, vh, vmin, vmax. Эти единицы в calc() почти всегда намеренны. 100% — это весь родительский блок. 100vw — весь вьюпорт. Переводить их в rem бессмысленно и сломает логику.

Конвертируются по умолчанию: всё остальное — px, pt, em, cm и т.д. Это, как правило, фиксированные отступы или размеры, которые и нужно перевести в относительные единицы.

Никогда не конвертируется: целевая единица сама в себя. Если конвертируем в rem, и внутри calc() есть rem — этот чип не будет доступен. Конвертировать 2rem → 2rem бессмысленно.

Пользователь может изменить предвыбор — нажать на любой чип и включить или отключить его вручную. Например, если в проекте em внутри calc() тоже нужно конвертировать — просто нажать на чип em, и он включится.

Результат

Ввод (toUnit: rem, root: 16px):  calc(100vw - 32px)
Чипы: [vw □]  [px ✓]
Вывод: calc(100vw - 2rem)

Ввод:  calc(2em + 8px)
Чипы:  [em □]  [px ✓]
Вывод: calc(2em + 0.5rem)

Результат всегда обёрнут в calc() и готов вставляться в CSS без правок.

Конвертация CSS/SCSS файла

Самый мощный блок — пакетная обработка CSS-кода. Принимает текст через редактор или загрузку файлов. Результат отображается рядом с подсветкой синтаксиса.

Режимы работы

Ввод вручную. Textarea слева для исходного кода, результат справа. Конвертация происходит в реальном времени при вводе.

Один файл. После перетаскивания или загрузки .css, .scss, .sass, .less — файл открывается в том же двухколоночном виде. В шапке отображается имя файла. Код можно редактировать прямо в браузере: изменения в левом редакторе сразу отражаются в конвертированном результате справа.

Несколько файлов. При загрузке двух и более файлов интерфейс переходит в режим списка. Каждый файл — отдельная строка-аккордеон с именем. Клик по строке разворачивает её и показывает двухколоночный редактор для этого конкретного файла. Кнопка «Скачать файл» у каждого элемента скачивает только его конвертированную версию. Кнопка «Скачать архив ZIP» в шапке собирает все файлы в один архив.

Выбор CSS-свойств для конвертации

Главный контрол блока — список CSS-свойств в боковой панели, сгруппированных по категориям. Только значения у включённых свойств будут изменены; всё остальное в файле останется нетронутым.

Границы, тени и позиционирование по умолчанию выключены не случайно. border: 1px solid — это, как правило, намеренный пиксель. box-shadow: 0 2px 4px rgba(0,0,0,0.2) — тоже. Их конвертация в rem технически корректна, но редко нужна на практике. Если нужно — включить несложно.

Тоггл у каждой категории поддерживает три состояния:

• Все включены — тоггл активен (подсвечен).
• Все выключены — тоггл неактивен.
• Частично — тоггл в промежуточном состоянии: ползунок посередине, цвет приглушён. Это значит, что в категории одни свойства включены, другие — нет. Клик по такому тогглу включает все свойства категории сразу.

Медиазапросы

Переключатель «Конвертировать внутри media запросов» контролирует, обрабатываются ли значения внутри @media-блоков.

Без этой опции CSS-файл с брейкпоинтами получится наполовину конвертированным: значения снаружи @media — в rem, значения внутри — по-прежнему в px. Включённый переключатель обрабатывает оба уровня:

/* До */
.card { font-size: 16px; }
@media (max-width: 768px) {
  .card { font-size: 14px; }
}

/* После (toUnit: rem) */
.card { font-size: 1rem; }
@media (max-width: 768px) {
  .card { font-size: 0.875rem; }
}

Ширина самого брейкпоинта (768px) не трогается — она не является значением свойства из списка конвертации.

Обработка calc() в файле

Внутри CSS-файлов может быть множество calc()-выражений, и к каждому применяется та же умная логика, что и в отдельном блоке конвертера: %, vw, vh внутри calc() не конвертируются по умолчанию.

Но здесь есть дополнительный уровень гибкости: для каждого режима работы (textarea, одиночный файл, каждый файл в мультирежиме) — свой независимый набор чипов, который отображается прямо под редактором.

Сценарий: два файла загружены в мультирежим. В tokens.scss все calc() используют только px — чип px активен. В animations.scss внутри calc() есть ещё и em, который в этом файле нужно тоже конвертировать — включаем чип em только для этого файла, первый файл не меняется. Настройки per-file, независимые.

Чипы для calc() не нужно настраивать вручную с нуля — они появляются автоматически, как только инструмент находит calc()-выражения в тексте, и предвыбор сделан по тем же умным правилам.

Сценарии использования

Сценарий 1: Перевод дизайн-токенов на rem

Дизайнер передал систему типографики и спейсинга в виде SCSS-файла с переменными — всё в px. Нужно перевести в rem для продакшна.

/* Исходник tokens.scss */
$font-size-xs:   12px;
$font-size-sm:   14px;
$font-size-base: 16px;
$font-size-lg:   20px;
$font-size-xl:   24px;

$spacing-1: 4px;
$spacing-2: 8px;
$spacing-3: 16px;
$spacing-4: 24px;
$spacing-5: 32px;
$spacing-6: 48px;

Загружаем файл в Unit Forge. В боковой панели — корневой шрифт 16px, целевая единица rem. В категориях включаем «Шрифты» и «Отступы» (они уже включены по умолчанию). Медиазапросы — включить на всякий случай.

/* Результат */
$font-size-xs:   0.75rem;
$font-size-sm:   0.875rem;
$font-size-base: 1rem;
$font-size-lg:   1.25rem;
$font-size-xl:   1.5rem;

$spacing-1: 0.25rem;
$spacing-2: 0.5rem;
$spacing-3: 1rem;
$spacing-4: 1.5rem;
$spacing-5: 2rem;
$spacing-6: 3rem;

Скачиваем файл — готово. Если нужно пересчитать под другой root (проект использует 10px) — меняем одно поле в боковой панели и скачиваем заново.

Сценарий 2: Fluid-типографика без медиазапросов

Новый проект, нужна типографическая шкала, которая плавно масштабируется от 320px до 1280px без ступенчатых брейкпоинтов.

Открываем блок «Генератор clamp()», переключаемся на Fluid-режим. Для каждого уровня заголовков подбираем граничные значения:

Вводим значения, вьюпорт 320→1280. Результат — четыре строки для копирования:

--text-h1:   clamp(1.625rem, 2.7083vw + 0.7593rem, 3.25rem);
--text-h2:   clamp(1.375rem, 1.6667vw + 0.8417rem, 2.375rem);
--text-h3:   clamp(1.125rem, 1.0417vw + 0.7917rem, 1.75rem);
--text-body: clamp(0.9375rem, 0.3125vw + 0.8375rem, 1.125rem);

Вставляем в :root, подключаем в компоненты — типографика адаптируется непрерывно на любом разрешении.

Сценарий 3: Миграция легаси-проекта

Унаследованный проект: три SCSS-файла, написаны три года назад, всё в px. Медиазапросы есть. Внутри встречаются calc(100% - 48px) и calc(100vw - 320px). Задача — перевести на rem, не сломав логику.

Перетаскиваем все три файла в Unit Forge. Получаем три аккордеона. Открываем каждый по очереди.

В боковой панели: все категории включены кроме «Границы» (там border: 1px solid намеренный) и «Тени» (там box-shadow тоже намеренный). Медиазапросы — включены.

У первого файла _layout.scss в calc()-выражениях только px — чип px активен, всё ок.

У второго _components.scss в calc() встречается em: calc(1em + 8px) — это межстрочный отступ, который привязан к размеру шрифта компонента. Чип em был автоматически не выбран — правильно, оставляем. Только px конвертируется.

Третий _animations.scss не содержит calc() вообще — блок чипов не появляется.

Сравниваем исходник и результат в каждом аккордеоне, убеждаемся что логика сохранена, скачиваем ZIP. Три файла конвертированы, настройки calc() у каждого были независимые.

Unit Forge доступен на toolz.macrulez.ru вместе с другими модулями: Image Compressor, Tiny SVG, Gradient Fabric, Fav Icona и Stronghold.