Конвертер LESS в CSS Online
Компилируйте LESS-код в чистый CSS в браузере. Без npm, без Node.js, без настройки.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Компилятор LESS в CSS
Зачем использовать этот компилятор LESS?
Нулевая конфигурация
Без npm, без webpack, без Grunt. Вставьте LESS-код — получите CSS мгновенно.
Официальный less.js
Используется официальный компилятор less.js. Максимальная совместимость со стандартом LESS.
Полная конфиденциальность
Ваш LESS-код не отправляется ни на какой сервер. Всё работает в браузере.
Проекты на Bootstrap 3
Легко компилируйте темы Bootstrap 3 и другие устаревшие проекты на LESS.
Как это работает
Три шага — никаких сложностей
Вставьте LESS-код
Напишите или вставьте LESS-код в редактор. Поддерживаются переменные @, вложенность, миксины и математические операции.
Мгновенная компиляция
Результат в CSS появляется автоматически. Компилятор LESS.js работает локально в браузере.
Скопируйте или скачайте CSS
Скопируйте CSS в буфер обмена или скачайте как файл .css, готовый к использованию.
FAQ
Остались вопросы?
LESS (создан Алексисом Сельером, псевдоним cloudhead, в 2009 году) и SCSS (часть Sass, создан в 2006 году) — препроцессоры CSS с разной философией. Наиболее заметное отличие — синтаксис переменных: LESS использует @ (тот же префикс, что и CSS at-rules вроде @media, что может вызывать путаницу), тогда как SCSS использует $. LESS был спроектирован для обработки как в браузере (через less.js), так и на сервере — чего Sass изначально не предусматривал. SCSS обладает более богатой экосистемой (Compass, Bootstrap 4+, Angular) и официальным компилятором Dart Sass. LESS остаётся актуальным главным образом из-за базы устаревших проектов на Bootstrap 3 и нативного JavaScript-компилятора (less.js).
Переменные LESS определяются как @name: value; и используются напрямую: @base-color: #4d90fe; @font: 'Roboto', sans-serif; color: @base-color. Отличительная особенность LESS — отложенное вычисление (lazy evaluation): переменные можно использовать до их объявления в том же области видимости, поскольку LESS обрабатывает весь файл перед разрешением значений. Это отличается от SCSS, где переменные следуют более строгому порядку объявления. Переменные LESS также могут интерполироваться в селекторах и именах свойств через синтаксис @{name}.
Миксины LESS определяются как обычные CSS-классы и вызываются с тем же синтаксисом: .mixin() определяет миксин, а вызов .mixin() внутри другого правила включает его. Ключевого слова @mixin, как в SCSS, нет. Это означает, что любой существующий CSS-класс можно использовать как миксин, просто вызвав его. Параметризованные миксины используют синтаксис .mixin(@param: default-value). LESS также поддерживает охранники миксинов: .mixin(@a) when (@a > 10) { ... } для условной компиляции — аналог @if в SCSS.
Нет. Bootstrap 3 (2013) ознаменовал массовое распространение LESS, сделав его известным целому поколению веб-разработчиков. Bootstrap 4 (2018) полностью перешёл на SCSS (Sass), Bootstrap 5 (2021) продолжил с SCSS. Переход Bootstrap стал одним из факторов, закрепивших SCSS как доминирующий препроцессор в современной экосистеме. Если у вас есть устаревший проект с Bootstrap 3, этот инструмент поможет извлечь скомпилированный CSS без необходимости поддерживать среду компиляции LESS.
Инструмент компилирует LESS-код, введённый напрямую, но не может разрешать ссылки на внешние файлы через @import, поскольку работает в браузере без доступа к файловой системе. При наличии нескольких LESS-файлов их можно объединить вручную перед компиляцией. Для проектов со сложной модульной структурой по-прежнему необходима локальная среда компиляции с less.js или интеграцией LESS в сборщик (webpack, Vite, Parcel).
LESS по-прежнему нужен в трёх основных случаях: поддержка устаревших проектов с Bootstrap 3 или тем WordPress/Magento/Drupal на LESS; извлечение CSS из LESS-сниппетов унаследованного кода для его переноса на нативный CSS или SCSS; изучение синтаксиса LESS для работы с существующими кодовыми базами. Для новых проектов текущая рекомендация — SCSS/Sass или напрямую современный CSS с нативными переменными и @layer.
LESS в CSS онлайн: компилируйте LESS без npm или Node.js — идеально для проектов Bootstrap 3
LESS — язык препроцессинга CSS, созданный Алексисом Сельером (известным в интернете как cloudhead) и опубликованный в 2009 году как программное обеспечение с открытым исходным кодом под лицензией Apache. Сельер изначально написал его на Ruby, однако переписанная им же версия на JavaScript (less.js) в 2010 году стала моментом, определившим популярность LESS: впервые препроцессор CSS мог работать прямо в браузере, загружая файл .less и библиотеку less.js через тег <script>. Эта возможность клиентской компиляции, хотя редко применяемая в продакшене по соображениям производительности, демократизировала доступ к препроцессингу CSS без необходимости строить инфраструктуру. Основные возможности LESS: прямое наследование CSS (любой валидный CSS является валидным LESS), переменные с префиксом @ (@color: #fff), вложенность селекторов, аналогичная SCSS, миксины как вызываемые классы (.mixin()), прямые арифметические операции со значениями (margin: @base * 2) и встроенные функции работы с цветом (lighten, darken, mix и др.).
Наибольший вклад LESS в веб-экосистему был связан с Bootstrap, наиболее популярным UI-фреймворком в мире. Bootstrap 2 (2012) и Bootstrap 3 (август 2013) использовали LESS как систему настройки и компиляции, познакомив миллионы веб-разработчиков с синтаксисом LESS через систему переменных и миксинов фреймворка. Темы Bootstrap 3 распространялись как наборы файлов .less с пользовательскими переменными, компилирующими финальный CSS. Эта интеграция сделала LESS наиболее известным препроцессором в период 2013–2018 годов, хотя SCSS уже был технически богаче и имел большее распространение в сообществах разработчиков Ruby и Angular. Решение Bootstrap 4 (альфа-версия в 2015 году, стабильный релиз в январе 2018) перейти на SCSS стало определяющей точкой: новые проекты мигрировали на SCSS, а LESS остался преимущественно связанным с поддержкой устаревших проектов.
Потребность в онлайн-компиляторе LESS в 2024 году сосредоточена главным образом в трёх сценариях обслуживания и миграции. Первый — экосистема устаревших проектов Bootstrap 3: несмотря на то что Bootstrap 5 доступен уже давно, многие корпоративные приложения и сайты на WordPress по-прежнему используют темы на Bootstrap 3 с кастомизациями LESS. Извлечь скомпилированный CSS из конкретного сниппета или проверить вывод переменной или миксина онлайн быстрее, чем поддерживать среду компиляции. Второй сценарий — миграция с LESS на SCSS или современный CSS: понять, какой CSS генерирует конкретный блок LESS, — первый шаг к его переписыванию на SCSS или нативных переменных. Третий сценарий — поддержка тем Magento (активно использующего LESS в системе тем Magento 2), отдельных тем Drupal и приложений на внутренних фреймворках, перешедших на LESS в период 2012–2017 годов. Convertir.ai запускает официальный компилятор less.js в браузере, не отправляя ни строки кода на внешние серверы.