Gibt es ein Tool, das CSS in less.css konvertiert?

Ich habe eine ziemlich große CSS-Datei, die ich in weniger konvertieren möchte. Als ich das CSS geschrieben habe, wusste ich nicht less.css, aber jetzt möchte ich immer noch mein altes CSS verwenden.

Gibt es ein Tool, mit dem ich es automatisch konvertieren kann?

Ich habe jetzt tatsächlich etwas gefunden: http://leafo.net/lessphp/lessify/

Es macht eine grundlegende Formatierung, zB:

#header {
/* ... */
}

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

zu

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

Tatsächlich benötigen Sie kein Konvertierungstool, um mit LESS zu arbeiten. Die LESS-Syntax ist abwärtskompatibel mit CSS . Das bedeutet, dass jede CSS-Datei auch eine gültige WENIGER-Datei ist.

Holen Sie sich einfach Ihr CSS und benennen Sie es in eine WENIGER-Datei um. Verwenden Sie dann WENIGER-spezifische Funktionen zusammen mit Ihren Änderungen. Je öfter Sie die Datei aktualisieren, desto mehr können Sie WENIGER Funktionen verwenden.

Ich habe dasselbe für SCSS und ein sehr großes Projekt mit 10 CSS-Dateien gemacht. Es war fast unmöglich (und eine enorme Zeitverschwendung), alles CSS mit SCSS neu zu schreiben. Ich habe es einfach umbenannt. Jedes Mal, wenn ich an der CSS-Datei arbeitete, führte ich ein kleines Refactoring des Codes durch, um Mixins, Variablen usw. zu nutzen.

Hast du dich wenigstens umgesehen? CSS kann viel besser konvertiert werden als Lessify. Insbesondere optimiert Lessify Ihre Klassen nicht sehr gut. Es kopierte die Zurücksetzung des Browsers auf alle generierten Mixins und erzeugte redundante Attribute. Es ist klar, dass es sich noch im experimentellen Stadium befindet. Keine der Dienstprogramme kann die Semantik bestimmen, sodass sie keine Werte in Ausdrücke, Variablen oder parametrische Mixins konvertieren können.

Am wenigsten optimiert es besser und scheint funktionaler zu sein. Es behandelt sogar Pseudoklassen für Sie:

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

Diese Tools eignen sich ideal für die Arbeit mit großen, bereits vorhandenen CSS-Dateien. Ich empfehle die folgenden Schritte, um CSS in LESS zu konvertieren (stellen Sie sicher, dass Sie eine Kopie der ursprünglichen CSS-Dateien behalten):

1. Wenn Sie mit mehreren additiven CSS-Dateien arbeiten, fügen Sie diese zu einer einzigen CSS-Datei zusammen. Dies stellt sicher, dass alles gemeinsam WENIGER und optimiert wird.

2. Führen Sie den resultierenden CSS-Code über ein Online-CSS-Bereinigungsprogramm aus. Ich habe mit cleancss gute Ergebnisse erzielt: http://www.cleancss.com/ . Dadurch werden alle überflüssigen und redundanten Markups entfernt, die möglicherweise nicht von einem WENIGER-Konverter erfasst werden.

3. Entfernen Sie @Media und alle Stile, die Sie in der CSS-Datei gespeichert haben. Sie können Probleme verursachen oder mögliche Redundanzen verursachen. Es ist wahrscheinlich eine gute Idee, die Resets in einer separaten Datei zu speichern.

4. Fügen Sie die resultierende CSS-Datei in Least ein und beobachten Sie das Biest.

5. Führen Sie Ihre Zurücksetzungen und @screen erneut ein.

6. Nachdem Sie fertig sind, durchsuchen Sie jedes der Attribute und suchen Sie nach geeigneten Kandidaten für das Refactoring, um sie in WENIGER-Variablen und -Ausdrücke umzuwandeln. CSS-Farb- und Schriftattribute lassen sich am einfachsten ausklammern, einfaches globales Suchen und Ersetzen funktioniert problemlos. Am Ende können Sie entscheiden, ob Sie die einzelne Datei in kleinere logische Dateien aufteilen möchten. Möglicherweise werden Sie durch diesen Vorgang veranlasst, Ihre Dateien auf eine andere Weise neu zu organisieren.

Ich bin nicht der Autor von Least, sondern nur jemand, der nach einem ähnlichen Werkzeug sucht, und habe beschlossen, der Welt davon zu erzählen.

Ich glaube nicht, dass ein Konverter wissen kann, was Sie mit einem Großteil des Codes machen wollen.

Beispielsweise würde es nicht unbedingt wissen, welche Variablen Sie verwenden möchten. Oder wie man Mixins oder Funktionen generiert.

Ich denke, mit diesem müssen Sie es manuell tun.

Wie wäre es mit Suchen und Ersetzen?

wenn Sie haben color:#ffffffund Sie es ändern möchten@color

einfach suchen color:#ffffffoder color : #ffffffersetzen mit @color.

Normalerweise vertraue ich diesen Werkzeugen nicht.

Oder Sie können ein wirklich einfaches PHP-Skript schreiben, das damit umgeht.

Update 1 :
Oder Sie können die http://nex-3.com/posts/96-scss-sass-is-a-css-extension verwenden, die der Erweiterung less ähnelt und über ein Konvertierungstool verfügt.

Versuchen Sie diese Seite: css2less.cc

Es konvertiert Ihr CSS während der Eingabe in WENIGER.