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

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

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

css
21 голос | спросил js-coder 1 +04002011-10-01T21:52:29+04:00312011bEurope/MoscowSat, 01 Oct 2011 21:52:29 +0400 2011, 21:52:29

6 ответов


17

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

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

#header {
/* ... */
}

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

к

#header {
/* ... */
p {
/* ... */
}
}
ответил js-coder 1 +04002011-10-01T23:28:53+04:00312011bEurope/MoscowSat, 01 Oct 2011 23:28:53 +0400 2011, 23:28:53
15

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

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

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

ответил Simone Carletti 2 +04002011-10-02T13:42:33+04:00312011bEurope/MoscowSun, 02 Oct 2011 13:42:33 +0400 2011, 13:42:33
6

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

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

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 в наименьшее количество и посмотрите на зверя.

  5. Восстановите свои сбросы и @screen.

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

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

ответил Simone Carletti 2 +04002011-10-02T13:42:33+04:00312011bEurope/MoscowSun, 02 Oct 2011 13:42:33 +0400 2011, 13:42:33
5

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

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

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

ответил Jason Gennaro 1 +04002011-10-01T22:00:07+04:00312011bEurope/MoscowSat, 01 Oct 2011 22:00:07 +0400 2011, 22:00:07
3

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

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

просто выполните поиск color:#ffffff или color : #ffffff и замените на @color.

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

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

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

ответил fatnjazzy 1 +04002011-10-01T21:57:28+04:00312011bEurope/MoscowSat, 01 Oct 2011 21:57:28 +0400 2011, 21:57:28
0

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

Он преобразует ваш CSS в LESS по мере ввода.

ответил Web_Designer 12 J0000006Europe/Moscow 2012, 08:10:34

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132