Компилятор Less в CSS

Этот Компилятор Less в CSS преобразует исходный код Less в стандартный CSS прямо в вашем браузере с помощью официального движка Less.js. Он разработан для фронтенд-разработчиков, дизайнеров, студентов и контент-команд, которым нужен быстрый способ протестировать переменные, примеси, вложенность, арифметику, функции цвета и условия в примесях без развертывания полноценного конвейера сборки.

Как использовать

1. Вставьте код Less: Вставьте ваш исходный код Less в редактор слева или нажмите на один из готовых примеров («Токены дизайна», «Библиотека примесей», «Математика и единицы», «Функции цвета» или «Условия примесей»).
2. Выберите параметры компиляции: Выберите формат вывода («Развернутый» для удобного чтения, «Сжатый» для минификации) и настройте режим математики или переключатель строгих единиц, если вашему коду это необходимо.
3. Скомпилируйте Less: Нажмите Скомпилировать Less, чтобы запустить официальный движок Less.js прямо в браузере. При включенной функции «Живая компиляция» результат также будет обновляться автоматически по мере ввода.
4. Проверьте CSS: Изучите сгенерированный CSS, просмотрите метрики компиляции (строки, размер вывода, блоки правил, соотношение размеров), откройте вкладку сравнения и проверьте изолированный фрейм живого предпросмотра.
5. Скопируйте или скачайте: Скопируйте скомпилированный CSS в буфер обмена в один клик или скачайте его в виде готового к использованию файла .css.

Что делает этот компилятор Less уникальным

• Анимированный конвейер компиляции: Наблюдайте за тем, как ваш исходный код проходит этапы Анализ → Вычисление → CSS, при этом активный этап подсвечивается в реальном времени, а любой сбойный этап отмечается красным цветом.
• Параллельный режим сравнения: Переключайтесь с обычного просмотра CSS на двухпанельный макет Less-vs-CSS, который наглядно показывает, какие именно возможности Less (переменные, примеси, математика, функции цвета) создали те или иные правила CSS.
• Пять подобранных начальных фрагментов кода: Каждый пример ориентирован на определенную концепцию Less (токены, примеси, математика, функции цвета, условия в примесях), чтобы вы могли учиться или сравнивать код без необходимости писать первоначальные настройки.
• Умные предупреждения: Встроенные подсказки появляются, если ваш код использует директиву @import в браузере, деление без круглых скобок в режиме математики Less 4 или свойства, которым в продакшене могут понадобиться вендорные префиксы.
• Живой изолированный фрейм предпросмотра: Скомпилированный CSS применяется внутри изолированного iframe, поэтому он никак не влияет на остальной интерфейс MiniWebtool, но при этом позволяет провести визуальную проверку.
• Метрики компиляции с соотношением размеров: Просматривайте не только итоговый размер вывода, но и его сравнение с исходным кодом Less, что очень удобно при оценке эффективности сжатого режима или рефакторинга.

Шпаргалка: Less против SCSS против CSS

Объяснение режимов математики в Less

В Less 4 изменился способ обработки арифметических операций, что иногда удивляет разработчиков, переноoutput старые фрагменты кода. Используйте селектор Режим математики на панели параметров:

• Деление в скобках (по умолчанию): Все математические операции выполняются без скобок, кроме деления, которое обязательно должно быть обернуто в круглые скобки — например, (@base / 2). Это предотвращает случайное деление в сокращенных свойствах вида font: 10px/14px.
• Всегда: Устаревшее поведение Less 3 — любой оператор (включая /) вычисляется без скобок. Переключайтесь на этот режим при компиляции старых кодовых баз.
• Строгий: Математическими операциями считаются только выражения внутри круглых скобок. Полезно, когда вам нужны абсолютно предсказуемые вычисления и вы не хотите, чтобы Less пытался угадывать контекст.

Используйте этот параметр совместно с переключателем Строгие единицы, чтобы заблокировать операции между несовместимыми единицами измерения (например, 10px + 2%), которые часто становятся источником незаметных багов.

Поддерживаемые базовые возможности Less

• Переменные: Ссылки на @radius: 14px; в любом месте файла.
• Вложенность и родительский селектор: Использование &:hover, &__badge и глубоко вложенных правил.
• Примеси (mixins): Блоки многократного использования вида .shadow(@color), а также условия в примесях для условного вывода.
• Функции цвета: darken(), lighten(), fade(), spin(), mix() и многие другие.
• Математика: Арифметика с единицами измерения (@gap * 1.5, @radius - 4px), регулируемая выбранным режимом математики.
• Циклы и рекурсия: Рекурсивные примеси для генерации утилитарных классов или колонок сетки.
• Функции: unit(), lightness(), extract(), length() и весь остальной набор встроенных функций Less.

Ограничения компиляции в браузере

Компиляция в браузере идеально подходит для быстрых проверок, обучения, прототипов и разбора фрагментов кода при код-ревью, но она не имеет доступа к файловой системе вашего проекта. Директивы @import, ссылающиеся на локальные компоненты, не сработают, если вы не вставите эти компоненты прямо в редактор над кодом, который их использует. Для финальных релизов запускайте ваш стандартный конвейер сборки, чтобы получить автопрефиксы, полноценное разрешение директив @import, карты источников и оптимизированную для сборщика минификацию.

Варианты использования

• Миграция: Вставка старого кода Less из Bootstrap 3 или устаревших дизайн-систем и изучение скомпилированного CSS для планирования переноса.
• Обучение: Переключение готовых примеров, чтобы увидеть, как конкретная концепция Less (математика, примесь, условие, функция цвета) сопоставляется с чистым CSS.
• Код-ревью: Быстрая проверка того, что изменения в Less создают ожидаемый результат перед слиянием пул-реквеста (PR).
• Документация: Генерация примеров CSS для публикаций в блогах, внутренних баз знаний (вики) или передачи компонентов между командами.
• Отладка: Изоляция некорректно работающего правила Less вне вашей основной сборки, чтобы подтвердить, кроется ли ошибка в вашем коде или в инструментах сборки.

FAQ

Что такое компилятор Less в CSS?

Компилятор Less в CSS преобразует исходный код Less (использующий переменные, примеси, вложенность и арифметику) в стандартный CSS, который могут отображать браузеры. Сам Less — это препроцессор CSS, представленный в 2009 году и широко используемый в Bootstrap 3 и многих дизайн-системах.

Запускается ли компилятор в моем браузере?

Да. Официальный движок Less.js загружается в ваш браузер и компилирует исходный код локально. Ваш код Less не загружается на серверы MiniWebtool при обычном использовании.

В чем разница между Less и Sass или SCSS?

Less использует префикс @ для переменных (например, @brand) и изначально был написан на Ruby, а затем перенесен на JavaScript. SCSS использует $ для переменных (например, $brand) и является частью экосистемы Sass. Оба поддерживают вложенность, примеси и арифметику, но синтаксис и названия функций отличаются. Этот инструмент компилирует только Less; для Sass используйте наш компилятор SCSS в CSS.

Может ли он обрабатывать директивы @import?

Компиляция в браузере не может читать приватные файлы проекта. Вставляйте импортируемые фрагменты Less прямо в редактор при тестировании кода, который зависит от локальных путей к файлам. Для полного разрешения @import запускайте компиляцию внутри вашего конвейера сборки.

Почему я получаю неверный результат математического выражения?

В Less 4 по умолчанию деление работает только в круглых скобках и используется нестрогая математика. Оберните деление в круглые скобки или включите параметр Строгая математика на панели настроек, чтобы вся арифметика выполнялась только внутри скобок. Переключатель Строгие единицы блокирует операции между несовместимыми единицами измерения, такими как px и %.

Готов ли скомпилированный CSS к использованию в продакшене?

Сгенерированный CSS отлично подходит для быстрых тестов, прототипов, обучения и небольших фрагментов кода. Для использования в продакшене запускайте ваш стандартный конвейер сборки, чтобы получить автопрефиксы, минификацию, карты источников (source maps) и полное разрешение директив @import.

Могу ли я скомпилировать полноценный файл .less со своего диска?

Да — используйте поле Загрузить файл .less на панели параметров. Ваш браузер прочитает файл локально и добавит его содержимое в редактор; ничего не отправляется на сервер. Если файл использует @import для подключения других частей, вставьте эти части над импортирующим кодом, чтобы они смогли разрешиться.