Есть ли инструмент, который преобразует CSS в less.css?

У меня довольно большой CSS-файл, который я хочу преобразовать в меньший. Когда я писал CSS, я не знал less.css, но теперь я все еще хочу использовать свой старый CSS.

Есть ли инструмент, который может помочь мне преобразовать его автоматически?

Я действительно нашел кое-что сейчас: http://leafo.net/lessphp/lessify/

Он выполняет базовое форматирование, например:

#header {
/* ... */
}

#header p {
/* ... */
}

в

#header {
/* ... */
p {
/* ... */
}
}

На самом деле, вам не нужен инструмент для конвертации, чтобы начать работать с LESS. Синтаксис LESS обратно совместим с CSS . Это означает, что любой файл CSS также является допустимым файлом LESS.

Просто получите ваш CSS и переименуйте его в LESS файл. Затем используйте LESS-специфичные функции вместе со своими изменениями. Чем больше вы будете обновлять файл, тем больше вы сможете использовать функции LESS.

Я сделал то же самое для SCSS и очень большого проекта с 10 CSS-файлами. Было почти невозможно (и огромная трата времени) переписать весь CSS с помощью SCSS. Я просто переименовал его, а затем каждый раз, работая над файлом CSS, выполнял небольшой рефакторинг кода, чтобы использовать в своих интересах миксины, переменные и так далее.

Вы смотрели на наименее? Гораздо лучше конвертировать CSS, чем Lessify. В частности, Lessify не очень хорошо оптимизирует ваши занятия. Он скопировал браузер, сбрасывает все свои сгенерированные миксины, создавая избыточные атрибуты. Понятно, что это все еще на экспериментальной стадии. Ни одна из утилит не может определить семантику, поэтому они не могут конвертировать значения в выражения, переменные или параметрические миксины.

Наименее лучше оптимизирует работу и кажется более функциональной. Он даже обрабатывает псевдоклассы для вас:

http://toki-woki.net/p/least/

Эти инструменты идеально подходят для работы с большими существующими CSS-файлами. Вот шаги, которые я рекомендую для преобразования CSS в LESS (убедитесь, что вы сохранили копию оригинальных файлов CSS):

1. Если вы работаете с несколькими аддитивными файлами CSS, объедините их в один файл CSS. Это гарантирует, что все МЕНЬШЕ и оптимизированы вместе.

2. Запустите полученный CSS-код через онлайн-утилиту очистки CSS. У меня были хорошие результаты с cleancss: http://www.cleancss.com/ . Это удалит любую лишнюю и избыточную разметку, которая не может быть поймана LESS-конвертером.

3. Удалите @Media и любой сброс стиля, который у вас есть в файле CSS. Они могут создавать проблемы или вносить возможные сокращения. Вероятно, это хорошая идея - хранить сбросы в отдельном файле.

4. Вставьте полученный CSS-файл в Least и наблюдайте за зверем.

5. Повторно представьте свои перезагрузки и @screen.

6. Теперь, когда вы закончите, просмотрите все атрибуты и найдите подходящих кандидатов для рефакторинга и превратите их в переменные и выражения LESS. CSS-атрибуты цвета и шрифта легче всего выделить, простой глобальный поиск и замена отлично работает. В конце вы можете решить, хотите ли вы разбить один файл на более мелкие логические файлы. Вы можете обнаружить, что в результате этого процесса вы реорганизуете свои файлы другим способом.

Я не автор Least, просто кто-то искал подобный инструмент и решил рассказать об этом миру.

Я не думаю, что у конвертера есть какой-либо способ узнать, что вы хотите делать с большей частью кода.

Например, он не обязательно будет знать, какие переменные вы хотите использовать. Или как генерировать миксины или функции.

Я думаю, что с этим вам нужно будет сделать это вручную.

Как насчет поиска и замены.

если у вас есть, color:#ffffffи вы хотите изменить его на@color

просто найдите color:#ffffffили color : #ffffffи замените на @color.

Я обычно не доверяю этим инструментам.

или вы можете написать действительно простой скрипт PHP, который справится с этим.

Обновление 1 :
или вы можете использовать http://nex-3.com/posts/96-scss-sass-is-a-css-extension, который похож на less и имеет инструмент конвертера.

Попробуйте этот сайт: css2less.cc

Он конвертирует ваш CSS в LESS по мере ввода текста.