Преобразователь Less в стандартный CSS — Numio
Компилируйте Less в CSS прямо в браузере. Переменные, вложенность, миксины и операции раскрываются в обычный CSS официальным компилятором less.js, так что результат можно проверить без установки lessc.
Проверить, какой CSS получается из переменных, вложенности и миксинов Less.
Less
CSS
Когда пригодится
- Проверить, какой CSS получается из переменных, вложенности и миксинов Less.
- Преобразовать небольшой файл Less для проекта на обычном CSS.
Как пользоваться
- Вставьте код Less или откройте файл .less.
- Выберите настройку вендорных префиксов для целевых браузеров.
- Проверьте сгенерированный CSS и скопируйте его.
Less
@primary: #2563eb;
.button {
color: @primary;
&:hover { text-decoration: underline; }
}CSS
.button {
color: #2563eb;
}
.button:hover {
text-decoration: underline;
}Подробности и ограничения
Неопределённая переменная или незакрытая скобка останавливают компиляцию. При поиске ошибки начните с короткого фрагмента.
Компиляция выполняется в браузере. @import внешнего URL может заставить браузер загрузить этот ресурс, поэтому лучше использовать самодостаточный код.
Импорт других локальных файлов, плагины Less и специфичные для проекта параметры компилятора недоступны. Вендорные префиксы зависят от настройки целевых браузеров.
FAQ
Это то же самое, что компиляция через lessc?
Используется less.js — тот же компилятор, который запускает lessc, поэтому самодостаточный файл с параметрами по умолчанию даёт тот же CSS. Возможности проекта, такие как локальные импорты и плагины, здесь недоступны.
Можно ли скомпилировать файл с @import?
Импорты, указывающие на другие файлы на вашем компьютере, в браузере разрешить нельзя. Вставьте импортируемый код напрямую или скомпилируйте весь проект через lessc.
Чем Less отличается от CSS?
Less — это CSS-препроцессор. Он добавляет переменные, вложенность, миксины и функции, и его нужно скомпилировать в CSS, прежде чем браузер сможет его использовать.